05 - 事件
05.01 - 事件概述
一般的直接被执行的js代码,在浏览器加载完成的时候,再浏览器重新加载之前不会再次执行(除开用定时器延迟执行的代码),那么就意味着异步的代码执行操作需要通过其它的方式触发,那么触发的时机,通常是用户做了某些操作之后进行的,像这种用户的操作被称之为“事件”
常用事件列表
- 鼠标事件
- 单击:click
- 双击:dblclick
- 移入:mouseover、mouseenter
- 移出:mouseout、mouseleave
- 按下:mousedown
- 抬起:mouseup
- 移动:mousemove
- 备注
- 事件在使用属性赋值的方式进行绑定的时候,需要添加 on 在事件名前面
- mouseover / mouseout 与 mouseenter / mouseleave 的区别在于,前者在其子级上同样会触发事件(冒泡),而后者不会
- 窗口事件
- 浏览器窗口大小改变:resize
- 窗口滚动:scroll
- 键盘事件
- 文档事件
- 表单事件
事件的定义方法(事件绑定)
-
事件的触发实际上是执行了一个函数
-
事件触发的对象可以是,dom节点,window,document,XMLHttpRequest,等对象
-
绑定事件实例:元素被点击时候执行弹窗
- 匿名函数
// 给document绑定一个点击事件 document.onclick = function(){ alert("hello world!"); }
- 命名函数
// 给document绑定一个点击事件 fn 不需要括号 document.onclick = fn; // 定义需要被绑定的事件 function fn(){ alert("hello world!"); }
- 标签属性
<!-- 通过标签属性绑定 --> <div id="box" onclick="fn()"></div> <script> function fn(){ alert("hello world!"); } </script>
事件解绑
- 事件重新赋值为null
<div id="box"></div>
<script>
var dBox = document.getElementById("box");
// 绑定
dBox.onclick = fn;
// 解绑
dBox.onclick = null;
function fn(){
alert("hello world!");
}
</script>
- 重新绑定新的事件
<div id="box"></div>
<script>
var dBox = document.getElementById("box");
// 绑定
dBox.onclick = fn;
// 再次绑定新的事件
dBox.onclick = fn_new;
function fn(){
alert("fn");
}
function fn_new(){
alert("fn_new");
}
</script>
05.02 - this
this 是一个关键字,代表当前方法调用的时候所属的对象,也就是说只有当方法被调用的时候 this 的指向才能明确
this 的指向
- 括号直接调用时 this 指向 window 对象
function fn(){
console.log("我属于:" + this);
}
// 方法名直接括号调用
fn(); // "我属于:[object Window]"
// 在子级作用域中调用直接括号调用
(function(){
fn();// "我属于:[object Window]"
}());
- 方法调用时 this 指向 触发事件的对象
<div id="box">点我点我!</div>
<script>
var dBox = document.getElementById("box");
function fn(){
console.log("我属于:" + this);
}
// document 调用
document.onclick = fn; // "我属于:[object HTMLDocument]"
// 标签元素调用
dBox.onclick = fn; // "我属于:[object HTMLDivElement]"
</script>
this 的使用场景
- 点击修改,获取元素自身的属性
<div>点我点我!</div>
<div>点我点我!</div>
<div>点我点我!</div>
<script>
var dDiv = document.getElementsByTagName("div");
function setColor(){
this.style.color = "red";
}
function getHTML(){
console.log( this.innerHTML );
}
for(var i=0;i<dDiv.length;i++){
dDiv[i].ondblclick = setColor;
dDiv[i].onclick = getHTML;
}
</script>
- 获取存储的自定义属性数据
<div>点我点我!</div>
<div>点我点我!</div>
<div>点我点我!</div>
<script>
var dDiv = document.getElementsByTagName("div");
for(var i=0;i<dDiv.length;i++){
dDiv[i].index = i;
dDiv[i].onclick = function(){
alert(this.index);
};
}
</script>