addEventListener()添加事件监听 （有兼容问题ie 6 7 8）
用法： obj.addEventListener( '事件类型',事件函数 , boolean )
第三个：false：不捕获 === 冒泡（默认） true：捕获 （从父级触发事件，传到子级）
oDiv.addEventListener( 'click' , function(){ alert(1) } );
向oDiv添加了click事件，事件的执行函数是 function(){ alert(1) }
说白：给对象添加事件 ，好处：如果多次添加不会覆盖
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
oDiv.onclick = function (){
alert(1); //这个会被覆盖掉 它是通过oDiv.onclick的一个属性添加的
}
oDiv.onclick = function (){
alert(2);
}
</script>
image.png
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
oDiv.addEventListener( 'click' , function(){console.log(1)});
oDiv.addEventListener( 'click' , function(){console.log(2)});
</script>
不会被覆盖
removeEventListener移除事件监听
用法：obj.removeEventListener( '哪个事件类型', 哪个函数) （有兼容问题ie 6 7 8）
说白：删除添加的事件
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
oDiv.addEventListener( 'click' , fn );
oDiv.addEventListener( 'click' , fn2 );
function fn(){
console.log(1);
}
function fn2(){
console.log(2);
}
oDiv.removeEventListener('click',fn); //上面click有添加了2个事件函数 要指定要删掉哪个
</script>
事件的冒泡与捕获过程图
低版本IE 6 7 8兼容
attachEvent( 'on+事件类型',事件函数 )添加
detachEvent( 'on+事件类型',事件函数 )删除
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
oDiv.attachEvent( 'onclick' , fn );
function fn(){
console.log( 22 );
}
</script>
</body>
image.png
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName( 'div' )[0];
oDiv.attachEvent( 'onclick' , fn );
oDiv.detachEvent( 'onclick' , fn ); //删除添加的事件
function fn(){
console.log( 22 );
}
</script>
</body>
addEventListener和attachEvent this指向问题
addEventListener 指向触发事件的对象
attachEvent 指向window
<body style='height: 2500px;'>
<div class="box">我是div标签</div>
<script type="text/javascript">
var oBox = document.getElementsByTagName( 'div' )[0];
addEvent( oBox , 'click' , fn , false );
function addEvent( obj , type , eFn ) {
function fn(e , b){
e = e || window.event;
eFn.call( obj , e ) //处理this指向跟event问题
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
return fn; //把上面的fn函数return上面 上面用一个变量来接收 为了清除事件
}
function fn(){
console.log( this.innerHTML )
}
</script>
图片.png
在ie6 7 8 下 说明this指向有问题
图片.png
<script type="text/javascript">
var oBox = document.getElementsByTagName( 'div' )[0];
addEvent( oBox , 'click' , fn , false );
function addEvent( obj , type , eFn ) {
function fn(e , b){
e = e || window.event;
eFn.call( obj , e ) //处理this指向跟event问题
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
return fn; //把上面的fn函数return上面 上面用一个变量来接收 为了清除事件
}
function fn(){
console.log( this.innerHTML )
}
</script>
图片.png
传参问题
<div class="box">我是div标签</div>
<script type="text/javascript">
var oBox = document.getElementsByTagName( 'div' )[0];
addEvent( oBox , 'click' , fn , false );
function addEvent( obj , type , eFn , boolean ){
function addEvent( obj , type , eFn ) {
function fn(e , b){
e = e || window.event;
eFn.call( obj , e ) //处理this指向跟event问题
}
if( window.addEventListener ){
obj.addEventListener( type , fn ,false )
} else {
obj.attachEvent( 'on' + type , fn )
}
return fn; //把上面的fn函数return上面 上面用一个变量来接收 为了清除事件
}
function fn(e){
console.log( this.innerHTML + e.clientX )
}
</script>
删除事件
removeEvent( oDiv , 'click' , fn )
function removeEvent( obj , type , eFn ){
!-[1,] ? obj.detachEvent( 'on' + type , eFn ) : obj.removeEventListener( type , eFn );
}
如果事件函数直接写在位置上面 非常不好解绑，用的要用有名函数
下面来说说为什么？
数据类型分为2种
原始数据类型/基础数据类型
number string boolean undefined null
在比较时，原始数据类型只会比较值，是不是长得一样，如果是就是true
在赋值时，就是把这个值赋值给一个变量/对象，给完就没有其他事了。
var a = 1;
var b = 1;
alert( a === b )//true
引用数据类型
object function arrary
在比较时，主要比较内存地址是否一致
例：
var arr1 = [];
var arr2 = [];
alert( arr1 === arr2 ) //弹出false
var a = [ 1,2,3,4],
var b = a;
b.push( 8 );
console.log( a ) ===> 1 ,2,3,4,8
引用类型是指向一个地方的，同一个地方改了 a引用得到也是改的
会在计算机的内存存放一个数组，就会有地址，每个数组地址是唯一的，引用数据类型是比较地址；
<script type="text/javascript">
function fn(){
console.log( 1 )
}
function fn2(){
console.log( 1 )
}
alert( fn === fn2 ) //false
alert( function (){alert(1)} === function (){alert(1)} ) //false
</script>
所有我们如果用
oDiv.addEventListener( 'click' , function (){alert(1)} )
oDiv.removeEventListener( 'click' , function (){ alert (1) })
这2个不是同一个事件函数只是长得一样的而已，没办法清除
es6拼接方法
var a = '阿里';
var b = '20';
var str = `我叫${a}今年${b}岁`;
console.log( str )
网友评论