<title>Document</title>
<style>
div{
width: 80px;
height: 80px;
background-color: pink;
}
</style>
</head>
<body>
<div>这是一个盒子</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var div=document.querySelector('div')
div.οnclick=function(event){
console.log(event)
}
div.addEventListener('click',function(e){
console.log(e)
})
// 1 event 就是一个事件对象写在我们侦听函数的小括号里面 当作形参来看
// 2 事件对象只有有了事件才会存在 他是系统给我们创建的 不需要我们传递参数
// 3 事件对象指的是事件的一系列相关数据的集合 比如 鼠标点击里面就包含了和鼠标的
// 相关信息 如果是键盘时间里面就包含键盘事件的信息 比如 判断用户按下了哪个键
// 4 此事件对象我们可以自己命名 evt e
// 5 事件对象有兼容性问题 ie678
// 可通过window.event 解决 写法(e=e||window.event)
var div=document.querySelector('div')
div.addEventListener('click',function(e){
console.log(e.target)
console.log(this);
})
var ul=document.querySelector('ul')
ul.addEventListener('click',function(e){
console.log(this);
console.log(e.target);
})
// e.target返回的是出发事件的对象(元素)
// this 返回的是绑定事件的对象
// 区别 e.target点哪个元素 返回哪个元素
// this是哪个元素绑定了这个点击事件 就返回谁
// 了解兼容性
// div.οnclick=function(e){
// e=e||window.event
// var target=e.target||e.srcElement
// console.log(target)
// }
3949
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
