事件绑定、事件处理模型、事件委托

如何绑定事件处理函数

  • ele.onXXX = functon (event){}
    • 兼容性很好,一个元素的同一个事件上只能绑定一个处理函数
    • 基本等同于写在HTML行间上
  • obj.addEventListener(type,fn,false);
    • IE9以下不兼容,可以为同一个事件绑定多个处理程序,同一个函数绑定多次只执行一次
  • obj.attachEvent('on'+type,fn);
    • IE独有,一个事件同样可以绑定多个处理程序,并且同一个函数绑定多次就执行多次

鼠标事件

  • click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、mouseleave
  • 移动端 touchstart、touchmove、touchend
  • 用e.button值区分鼠标左右键 0-左键 1-滚轮 2-右键
  • DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键

键盘事件

  • keydown、keyup、keypress
  • 执行顺序 keydown > keypress > keyup
  • keydown 和 keypress的区别
    • keydown可以响应任意键盘按键,keypress只可以响应字符类键盘按键(ASCII中存在的)
    • keypress 返回ASCII码,可以转换成相应字符 String.fromCharCode(e.charCode)

文本类事件

  • input、focus、change、blur
    //属实不明白为什么用这个写法
    <input type="text"
     value="请输入用户名" 
     onfocus="if(this.value == '请输入用户名'){this.value = '';this.className = 'text'}" 
     onblur="if(this.value == ''){this.value = '请输入用户名';this.className = 'placeholder'}"/>
    

窗口操作类(window上的事件)

  • scroll、load(效率较低)
  • IE6不支持固定定位,利用scroll和绝对定位实现固定定位效果

事件绑定中的this指向问题

  • ele.onXXX = function(event){}
    • 程序this指向dom元素本身
  • obj.addEventListener(type,fn,false);
    • 程序this指向dom元素本身
  • obj.attachEvent('on' + type,fn);
    • 程序this指向window
    	//解决this指向
    	div.attachEvent('onclick',function(){
    		fn.call(div)
    	})
    	function fn(){}
    

事件添加封装函数

	function addEvent(ele,type,handle){
		if(ele.addEventListener){
			ele.addEventListener(type,handle,false);
		}else if(ele.attachEvent){
			ele.attachEvent('on' + type, function(){
				handle.call(ele);
			})
		}else{
			ele['on' + type] = handle;
		}
	}

解除事件处理程序

  • ele.onclick = false/ '' / null;
  • ele.removeEventListener(type,fn,false);
  • ele.detachEvent('on' + type, fn);
  • 若绑定匿名函数,则无法解除

事件处理模型

  • 事件冒泡
    • 结构上嵌套关系的元素,会存在事件冒泡功能,即同一事件,自子元素冒泡向父元素。
  • 事件捕获
    • 结构上嵌套关系的元素,会存在事件捕获功能,即同一事件,自父元素捕获至子元素。
    • IE没有捕获事件
  • 触发顺序,先捕获,后冒泡(触发顺序指父元素,子元素先绑定的先执行
  • focus,blur,change,submit,reset,select等事件不冒泡

IE中另类的事件捕获

  • ele.setCapture(); 将页面中的所有发生的事件捕获到自己身上
  • ele.releaseCapture() 关闭该捕获机制

取消冒泡

  • W3C标准 event.stopPropagation(); 但不支持IE9以下版本
  • IE(Chrome也支持):event,cancelBubble = true;
  • 封装取消冒泡函数
    function stopBubble(event){
    	if(event.stopPropagation){
    		event.stopPropagation();
    	}else{
    		event.cancelBubble = true;
    	}
    }
    

阻止默认事件

  • return false; 以对象属性的方式注册的事件才生效
    div.oncontextmenu = function () {
    	console.log('a');
    	return false;
    }
    //相当于
    <a href="javascript:void(false)" > demo</a>
    
  • event.preventDefault(); W3C标注,IE9以下不兼容
  • event.returnValue= false; 兼容IE
  • 封装阻止默认事件的函数
    function cancelHandler(event){
    	if(event.preventDefault){
    		event.preventDefault();
    	}else{
    		event.returnValue = false;
    	}
    }
    

    事件对象

    • 事件源对象
      • event.target 火狐只有这个
      • event.srcElement IE只有这个
      • chrome 都有
      • 兼容写法
div.onclick = function (e){
	var event = e || window.event;
	var target= event.target || event.srcElement;
	console.log(target)
}

事件委托

  • 利用事件冒泡,和事件源对象进行处理
  • 优点:
    • 性能 不需要循环所有的元素一个个绑定事件
    • 灵活 当有新的子元素是不需要重新绑定事件
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script>
	ul.onclick = function (e){
		var event = e || window.event;
		var target= event.target || event.srcElement;
		console.log(target.innerText)
	}
	</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值