原生js未来元素事件监听的写法
来源:互联网 发布:做淘宝客服工资怎么样 编辑:程序博客网 时间:2024/06/05 14:22
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数 说明 elementObjectDOM对象(即DOM元素)。eventName
attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
参数 说明 elementObjectDOM对象(即DOM元素)。eventName
注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
事件名称。注意,这里的事件名称没有“ on ”,
如鼠标单击事件 click ,鼠标双击事件 doubleclick ,
鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
handle事件句柄函数,即用来处理事件的函数。useCaptureBoolean类型,是否使用捕获,一般用false
。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。
attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
事件名称。注意,与addEventListener()不同,
这里的事件名称有“ on ”,如鼠标单击事件 onclick ,
鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,
鼠标移出事件 onmouseout 等。
handle事件句柄函数,即用来处理事件的函数。注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
- function addEvent(obj,type,handle){
- try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
- obj.addEventListener(type,handle,false);
- }catch(e){
- try{ // IE8.0及其以下版本
- obj.attachEvent('on' + type,handle);
- }catch(e){ // 早期浏览器
- obj['on' + type] = handle;
- }
- }
- }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:
- addEvent(document.getElementById("demo"),"click",myAlert);
- function myAlert(){
- alert("又是一个警告框");
- }
阅读全文
0 0
- 原生js未来元素事件监听的写法
- jquery动态添加元素后, 该元素事件失效,可尝试原生 js写法解决
- js DOM事件监听与解除的兼容性写法
- js原生的ajax写法
- 原生JS绑定事件的兼容性写法与绑定事件的几种方法
- js动态创建的元素添加监听事件
- 绑定未来元素的事件
- js 给未来元素绑定事件
- 原生JS根据元素id调用元素事件无效的问题
- 原生js中的事件委托(为新添加的DOM元素添加事件)
- js监听键盘事件的方法—原生和jquery的区别
- 原生js的ajax请求兼容写法
- 原生JS的事件绑定
- 原生JS的事件绑定
- Android按钮点击监听事件的写法
- ajax原生js写法
- js代理监听动态添加元素事件(类似jquery的delegate事件)
- 原生JS如何利用冒泡减少事件的触发,只代理给共有的父元素。
- 二叉树中和为某一值的路径
- 03期:好用的setTimeout(func, 0)
- Java面试题目---偶串
- ubuntu 12.04下apache 配置家目录地址
- amd64下的合法与非法地址
- 原生js未来元素事件监听的写法
- exec函数族总结
- 数据结构-线性顺序表
- 4 Values whose Sum is 0 POJ
- 巧妙的实现点阵图形显示可视化编程(C语言)
- mysql之skip-name-resolve解决外网链接客户端过慢问题
- 代理模式
- Ubuntu下安装Express框架
- 四种解析XML文件的方法