dom对象中的this和event.target区别
1.this是事件冒泡，动态变化。先触发内部事件，由内到外的执行。
<script>
function testdiv(val){
console.log(val.id);
}
function testa(val){
console.log(val.id);
}
</script>
<body>
<div onclick="testdiv(this)" id="testdiv">
<a href="#" onclick="testa(this)" id="testa">click me</a>
</div>
</body>
运行结果
2.event.target代表的是触发事件的dom对象，是静态不变的。
<script>
function testdiv(){
console.log(event.target.nodeName);
}
function testa(){
console.log(event.target.nodeName);
}
function testbody(){
console.log(event.target.nodeName);
}
</script>
<body onclick="testbody()">
<div onclick="testdiv()" id="testdiv">
<a href="#" onclick="testa()" id="testa">click me</a>
</div>
</body>
运行结果
总结：两者都代表dom对象，如果需要调用jquery的方法可以这样$(this),$(event.target)。
dom对象中的this和event.target区别的更多相关文章
- jquery this 和 event.target 区别
1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.t ...
- 在 JS 对象中使用 . 和 [] 操作属性的区别
在 JS 对象中,调用属性一般有两种方法--点和中括号的方法. 例如 使用点方法 var obj = { name: "cedric" } console.log(obj.name ...
- event对象中offsetX,clientX,pageX,screenX的区别
1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...
- JavaScript 中的window.event代表的是事件的状态,jquery事件对象属性,jquery中如何使用event.target
http://wenda.haosou.com/q/1373868839069215 http://kylines.iteye.com/blog/1660236 http://www.cnblogs. ...
- jquery中使用event.target的几点
jquery中使用event.target的几点 1.this和event.target的区别: js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事 ...
- [转]jquery中使用event.target的几点
转自: http://www.cnblogs.com/12go/archive/2011/12/28/2304502.html 1.this和event.target的区别: js中事件是会冒泡的,所 ...
- jquery中this和event.target的区别
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性
查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...
- 【Jquery】this和event.target的区别
1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素: 2.this和event.target都是dom对象,如果要使用jque ...
随机推荐
- android:contentDescription的作用是什么
在写Android的XML布局文件时,在ImageView或ImageButton中经常会碰到一个提示: Missing contentDescription attribute on image. ...
- Java中使用poi导入、导出Excel
一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已经习惯用Excel打印.这样在我们实际 ...
- 饥饿的牛(hunger)
饥饿的牛(hunger) 题目描述 牛在饲料槽前排好了队.饲料槽依次用1到n(1≤n≤2000)编号.每天晚上,一头幸运的牛根据约翰的规则,吃其中一些槽里的饲料.约翰提供B个区间的清单.一个区间是一对 ...
- 网页中如何用 CSS 设置打印分页符
Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...
- 微信公众号系列 --- ionic在IOS的键盘弹出问题
在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个 ...
- 消除SDK更新时的“https://dl-ssl.google.com refused”异常--（转）
SDK更新时的“https://dl-ssl.google.com refused”错误 Download interrupted: hostname in certificate didn't ma ...
- over-float清除浮动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HDU 1176 免费馅饼（数塔dp）
一开始被吓到了,后来再仔细一读发现就是一个数塔,没有那么复杂 #include<stdio.h> #include<string.h> #include<algorith ...
- python WEB接口自动化测试之requests库详解
由于web接口自动化测试需要用到python的第三方库--requests库,运用requests库可以模拟发送http请求,再结合unittest测试框架,就能完成web接口自动化测试. 所以笔者今 ...
- PAT (Advanced Level) 1052. Linked List Sorting (25)
简单题. #include<iostream> #include<cstring> #include<cmath> #include<algorithm> ...