js动态绑定事件方法

1.给对象绑定事件

var t = document.getElementById("tab1");
t.onclick = function tst(){
alert('');
}

2.绑定事件监听函数addEventListener() 或 attachEvent()
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle	事件句柄函数，即用来处理事件的函数。
useCapture	Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);

参数	说明
elementObject	DOM对象（即DOM元素）。
eventName	事件名称。注意，与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;}}
}

<span style="color: rgb(178, 34, 34); font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; font-size: 14px; line-height: 22.4px; background-color: rgb(252, 252, 252);">这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。</span>

例如，为一个 id="demo" 的按钮绑定事件，鼠标单击时弹出警告框：

addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){alert("又是一个警告框");
}

转自：http://www.itxueyuan.org/view/6338.html

js动态绑定事件方法相关推荐

2种js动态绑定事件方法
1.使用原生JS动态为动态创建的对象绑定事件 1-1.创建一个function,用来兼容IE8以下浏览器添加事件 function addEvent( el, type, fun) { if ( el ...
jQuery动态绑定事件或者原生js动态绑定事件
说一个这周写前后端交互时遇到的一个印象深刻的问题--动态绑定事件. 一.jQuery 一般我们给节点绑定事件使用的都是这样的形式 $("#btns").click(function ...
VUE v-for中动态绑定事件方法
今天做了一个菜单权限的功能,需要根据后台返回的菜单内容在前台用VUE展示,并且点击不同菜单按钮可以进入到不同的页面,所以这里要动态绑定不同的事件方法一开始尝试过在v-on:click里直接写方法名的 ...
js 动态绑定事件 on click 完美解决绑定不成功
动态绑定坑了多少人..... //绑定 $("ol").on("click","li a",function(){ ... }) / ...
浅谈js与jq给新增元素动态绑定事件（事件委托）
正确效果: 先看结构 HTML <div class="box-head"><ul class="tab"><li class=& ...
html 页面自动滚动,js监听html页面的上下滚动事件方法
最近在一个项目中,在写前端页面的时候,想像以前做Android时在页面时刻监听上下滚动的事件,查找资料发现由鼠标或类似用户动作触发的事件有以下图示: 不多说了,直接上代码了,经过测试可以使用: Dom ...
html 点击事件阻止冒泡,js阻止事件冒泡的两种方法
本篇文章给大家分享的内容是关于js阻止事件冒泡的两种方法 ,有需要的朋友可以参考一下一.冒泡事件简介当我们点击一个控件的时候,如果包括这个控件的父控件也有click事件,则会继续执行. 方法一:e ...
js在控件原有的事件方法中加入自己的方法
有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...
Vue和Js的阻止事件冒泡和阻止默认事件方法
原生js取消事件冒泡 try{e.stopPropagation();//非IE浏览器}catch(e){window.event.cancelBubble = true;//IE浏览器} 原生js阻 ...

js动态绑定事件方法

js动态绑定事件方法相关推荐

最新文章

热门文章