事件

最新推荐文章于 2024-07-25 08:06:37 发布

丁大聪明

最新推荐文章于 2024-07-25 08:06:37 发布

阅读量130

点赞数 1

分类专栏： webapi

本文链接：https://blog.csdn.net/weixin_42283360/article/details/87622433

版权

webapi 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

事件

点击事件
input框
鼠标
键盘
页面加载事件
滚动条事件
- 如何给浏览器的滚动条注册onscroll事件呢
注册事件的方法
事件触发的三个阶段(只针对同一个事件类型)
事件委托
事件对象
- 事件对象常用的属性
- 事件对象的方法

点击事件

参考博客链接

onclick

input框

onfocus 当元素获取到焦点的时候触发

odiv.onfocus = funcion(){}

onblur 当元素失去焦点的时候触发
focus() 给指定的元素设置焦点

obj.focus()

blur() 取消指定元素的焦点
select() 全选当前的文字

<body>
    <input type="text" />
    <button >全选</button>
    <script>
    window.onload = function() {
        var oinpt = document.getElementsByTagName("input")[0];
        var obtn = document.getElementsByTagName("button")[0];
        obtn.onclick = function() {
            oinpt.select();
        }
    }
    </script>
</body>

鼠标

onmouseover 鼠标移入会冒泡
onmouseout 鼠标移出会冒泡
onmouseenter 鼠标移入不会冒泡推荐使用
onmouseleave 鼠标移出不会冒泡推荐使用
onmousedown 鼠标按下
onmouseup 鼠标放开
onmousemove 鼠标移动

键盘

onkeydown 键盘按下
onkeyup 键盘抬起

document.onkeydown = function(event) {
	// 常用的是event.keyCode, 因为这是标准的, 其他的是非标准的(w3c统一规范的是标准的, 否则是非标准的)
}

页面加载事件

onload

window.onload = function () {
  
  // 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}

onunload

window.onunload = function () {
  // 当用户退出页面时执行(关闭页面)
}

滚动条事件

onscroll
用于监听滚动条的事件, 只要滚动条移动, 就会触发事件

var box = document.getElementById('box'); 
box.onscroll = function () {
	console.log(box.scrollTop);
}

如何给浏览器的滚动条注册onscroll事件呢

这俩方法都可以
document.onscroll = function () {};
window.onscroll = function () {}; // 更常用, 推荐

注册事件的方法

1. 方法一

// 事件的三要素:
// 1. 事件源
// 2. 事件名
// 3. 事件处理函数
** 多次给同一个元素注册同一个事件, 后面的会覆盖前面的
element.onclick = function () {
// 事件触发执行的代码
alert('哈哈')
}
box.onclick = null;

2. 方法二

给同一个元素注册相同的事件, 不会覆盖
第一个参数: 事件名称
第二个参数: 事件处理函数
第三个参数: boolean 来控制事件触发的阶段
box.addEventListener('click', eventCode, false); // 注册  ie9+
box.removeEventListener('click', 事件处理函数的名称, false); // 移除
function eventCode() {
	console.log('点击后执行');
}
如果使用removeEventListener取消事件, 那么在注册的时候, 第二个参数就不能传入匿名函数. 因为移除的时候, eventCode的地方要放注册事件的时候的事件处理函数的名称

3. 方法三

为了兼容addEventListener的
attachEvent() 用于兼容早期ie浏览器的
box.attachEvent('onclick', eventCode); // 注册 兼容早期ie浏览器
box.detachEvent('onclick', 事件处理函数的函数名); // 移除

function eventCode() {
	console.log('点击后执行');
}

事件触发的三个阶段(只针对同一个事件类型)

1. 事件捕获阶段 父元素的事件在捕获阶段执行- (true)
2. 事件目标阶段 
3. 事件冒泡阶段 父元素的事件**默认**在冒泡阶段执行- (false)

事件委托

事件委托的原理: 事件冒泡!
点击子元素, 冒泡到父元素, 触发父元素的事件. 事件的触发, 浏览器会创建一个对应的事件对象, 事件对象上的target属性, 会对应被点中的那个子元素, 然后可以操作子元素, 形成一种针对子元素注册事件的效果, 但是又只是给父元素注册了事件.

不仅仅是addEventListener能够实现事件委托, onclick也可以, 因为他的原理是事件冒泡. 什么事件都可以!
box.addEventListener('click', function(event){
	console.log(event)
	console.log(event.target)
}, false); // 注册  ie9+

事件对象

事件对象常用的属性

    var ul  = document.getElementById('wrap');
    ul.onclick = function(event){
       console.log(event.type) //事件的类型
       console.log(event.target)//事件目标
       console.log(event.clientX);//鼠标在可视区域水平方式的坐标
       console.log(event.clientY);//鼠标在可视区域垂直方向的坐标
       console.log(event.pageX); //鼠标在整个页面的水平坐标
       console.log(event.pageY);//鼠标在整个页面的垂直坐标
    }

事件对象的方法

event.preventDefault(); 阻止默认行为
event.stopPropagation(); 阻止事件传播

// event.preventDefault(); 阻止默认行为
// event.stopPropagation(); 阻止事件传播
var link = document.getElementById('a'); 
link.addEventListener('click',function(event){
    console.log('nihao');
    // return false; 在addEventListener中无法阻止a标签的默认跳转
    event.preventDefault(); // 这个可以阻止a标签的默认跳转
},false)

 link.onclick = function(){
     return false; // 在onclick事件中, 可以阻止a标签的默认跳转
 }