前端事件绑定
来源:互联网 发布:最长递增子序列 c语言 编辑:程序博客网 时间:2024/05/22 12:04
Event 对象
HTML DOM Event 对象
IE 中的 Event 对象
事件处理程序
HTML 事件处理程序
事件直接写在html的元素里面,缺点:html和js代码紧密的耦合在一起。
<a href="" onclick="alert('msg');">测试</a>
0级 DOM事件处理程序
把一个函数赋值给一个事件的处理程序属性,优点:比较简单,跨浏览器支持。缺点:不能添加多个事件处理程序,最后一个事件会覆盖前面的事件
document.getElementById('id').onclick = function () { alert(1);}
2级 DOM事件处理程序
通过 addeventlistener()
添加事件,只能用 removeEventlistener()
删除此事件。它们都接收三个参数:要处理的事件名event(不加'on')、作为事件处理程序的函数function(优点:可以添加多个事件处理程序,)和一个布尔值useCapture。布尔参数仅仅在现代浏览器最近的几个版本中是可加可不加的,并且true代表该事件在捕获阶段执行,false代表在冒泡阶段执行,建议写false,因为有些浏览器只有冒泡阶段。
target.addEventListener(type, listener[, useCapture]);target.removeEventListener(type, listener[, useCapture]);
IE 事件处理程序
IE8 及更早IE版本不支持 addEventListener() 方法,Opera 7.0 及 Opera 更早版本也不支持。 但是,对于这些不支持该函数的浏览器,你可以使用 attachEvent()
方法来添加事件句柄。通过 attachEvent()
添加事件,只能用 detachEvent()
删除此事件。这两个方法接收相同的两个参数:事件处理程序名称 type 与事件处理函数 function,不支持第三个参数的原因:IE8--只支持冒泡冒泡流。
element.attachEvent(type, function)element.detachEvent(type, function)
事件代理和委托
当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
<div id="box"> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p></div><script> let box = document.getElementById('box'); box.addEventListener('click', function (e) { // 检查事件源e.targe是否为P if (e.target.nodeName === 'P') { // 真正的处理过程在这里 alert('p'); } })</script>
/* * @Desc 跨浏览器兼容的事件处理程序(能力检测) */var eventshiv = { // event兼容 getEvent: function(event) { return event ? event : window.event; }, // type兼容 getType: function(event) { return event.type; }, // target兼容 getTarget: function(event) { return event.target ? event.target : event.srcelem; }, /** * 添加事件句柄 * 2级 DOM -> IE -> 0级 DOM */ addHandler: function(elem, type, listener) { if (elem.addEventListener) { elem.addEventListener(type, listener, false); } else if (elem.attachEvent) { elem.attachEvent('on' + type, listener); } else { // 在这里由于.与'on'字符串不能链接,只能用 [] elem['on' + type] = listener; } }, // 移除事件句柄 removeHandler: function(elem, type, listener) { if (elem.removeEventListener) { elem.removeEventListener(type, listener, false); } else if (elem.detachEvent) { elem.detachEvent('on' + type, listener); } else { elem['on' + type] = null; } }, /** * 添加事件代理 */ addAgent: function (elem, type, agent, listener) { elem.addEventListener(type, function (e) { if (e.target.matches(agent)) { listener.call(e.target, e); // this 指向 e.target } }); }, /** * 取消默认行为 * 非IE -> IE */ preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, /** * 阻止事件冒泡 * 非IE -> IE */ stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble = true; } }};console.log('eventshiv.js 文件加载成功!');
- 前端绑定事件
- 前端事件绑定
- 前端进阶之路:点击事件绑定
- 前端事件绑定知识点(面试要点)
- javascript之博客前端之事件绑定以及浏览器检测
- 前端开发——jquery之事件委托和绑定
- 前端事件绑定知识点(面试常考)
- 绑定事件
- 绑定事件
- 绑定事件
- 事件绑定
- 事件绑定
- 事件绑定
- 事件绑定
- Jquery前端之 事件绑定(二) 解决事件的删除,事件的无序执行的问题,有个小例子
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- Web前端从入门到放弃(js事件的绑定)
- WEB前端 | JS基础——(9-3)事件冒泡与绑定
- springmvc常用注解标签详解
- CSS-内边距/外边距
- noip2016普及组复赛
- Spring模拟HTTP请求——RestTemplate类使用的理解
- 多校1002 HDU-6034 Balabala Power-26进制大数加&贪心
- 前端事件绑定
- 小米5调试Installation failed with message Failed to establish session.
- UVa816 例题 6-14 Abbott的复仇 (Abbott's Revenge,ACM/ICPC World Finals 2000)
- 高斯消元学习总结
- 算法 直接插入排序 c语言
- Hihocoder-1545 小Hi和小Ho的对弈游戏(博弈)
- 使用struts2.5版本遇到的问题
- URAL 1519 Formula 1(插头DP)
- [简单DP]Tickets HDU