问题分析：
如存在多个li的情况下，只为其中一个或几个绑定事件，而其他的不受事件影响。方法有很多种，比较简单的办法就是为需要绑定事件的li标签添加class属性。
举例如下：
HTML代码：
<ul><li>字符串1</li>
<li>字符串2</li>
<li class="name">字符串3</li>
<li>字符串4</li>
<li>字符串5</li>
</ul>
jQuery代码：
//绑定class属性包含name的标签。$('.name').click(function(){
//输入当前标签的内容。
alert($(this).html())
})
页面初始化结果：
点击带有class属性的li（字符串3）的效果：
一、原生JS事件绑定方法：1、通过HTML属性进行事件处理函数的绑定如：
1
＜a href="#" onclick="f()"＞
2、通过JavaScript对象属性进行绑定：
1
2
var a=document.getElementById("a")
a.onclick=function(){alert("你好！")}//这里也可以不用匿名的函数直接赋方法名也是可以的
通过以上这种方式进行事件函数的绑定有个缺点就是只能对一个元素的一个事件绑定一个事件处理程序，如
1
2
3
4
5
6
document.body.onclick=function(){
alert("first.")
}
document.body.onclick=function(){
alert("second.")
}
以上这种方式后面的事件处理程序会将前面的覆盖只会执行alert（"second"）,前面的将不会被执行。
3、利用所有文档元素的方法进行事件绑定：
a、addEventListener(type,handler,boolean),兼容IE8以后的所有浏览器
b、attachEvent（type,handler）适用于IE8及以下版本的浏览器
另种方法可以为JS对象的一个类型事件注册多个事件处理程序，但两者是有区别的：
（1）addEventListener中的type是不带有on的如点击事件直接用"click",而在attachEvent中的type是需要带有前缀on的；（2）前者可以接收三个参数决定事件发生的阶段是在捕获阶段还是冒泡阶段,为true则发生在捕获阶段，如果为false则发生在冒泡阶段；（3）通过addEventListener注册的事件的执行顺序与事件的注册顺序一致，即先注册的先执行，后注册的后执行。而后者执行的顺序与注册的顺序是无关的，因而在写代码时代码的执行不要依赖事件的注册顺序。（4）addEventListener对于相同的事件只会注册一次，即使多次的写了注册函数也只会成功注册一个，而后者可以将将相同的事件处理函数注册多次，并且会多次被执行。
这两种方法通常会被同时应用用于兼容不同版本的浏览器。如：
1
2
3
4
5
6
7
if(ele.addEventListener())
{
你用的是jquery可以手动调用jquery的触发事件的方法。例如以下例子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="aaa">aaa</button>
<button id="bbb">bbb</button>
</body>
<script src="jquery.js"></script>
<script>
$(function () {
//给aaa增加事件监听
$('#aaa').on('click',function () {
console.log('aaa clicked')
// 触发bbb点击事件
// 第一种方案：调用bbb点击事件的执行方法,但此时获取不到bbb的点击event对象
bbbClickHandler()
//第二种方案:模拟触发点击bbb的过程
$('#bbb').trigger('click')
})
// 给bbb增加点击事件
function bbbClickHandler(){
console.log(arguments)
console.log('bbb clicked')
}
$('#bbb').on('click',bbbClickHandler)
})
</script>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）