js事件对象相关随记

1.什么是事件

JavaScript事件是由访问Web页面的用户引起的一系列操作,
例如:用户点击。当用户执行某些操作的时候,再去执行一系列代码。

2.事件的三种写法

//在HTML中把事件处理函数作为属性执行JS函数
<input type="button" value="按钮" onclick="alert('你好');"  />   

//执行与脚本分离
<input type="button" value="按钮" onclick="fn();"  />            

//分离的脚本
    var input = document.getElementsByTagName('input')[0];     
    input.onclick = function () {     
        alert('你好');
    };

3.事件对象

一.事件对象
当触发某个事件时,会产生一个事件对象,这个对象包含着所有与事件有关的信息。
包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

在非IE浏览器下,事件对象作为事件的参数,在IE下是window.event
//实现跨浏览器兼容获取event对象
    input.onclick = function (evt) {
        var e = evt || window.event;                
        alert(e);
    };
二.事件对象的作用

1. 可视区及屏幕坐标

clientX 可视区X坐标,距离左边框的位置
clientY 可视区Y坐标,距离上边框的位置
screenX 屏幕区X坐标,距离左屏幕的位置
screenY 屏幕区Y坐标,距离上屏幕的位置

    document.onclick = function (ev) {         
        var e = ev || window.event;
        alert(e.clientX + ',' + e.clientY);
        alert(e.screenX + ',' + e.screenY);
    };
2.判断热键是否按下

像Shfit、Ctrl、Alt等,

shiftKey 判断是否按下了Shfit键
ctrlKey 判断是否按下了ctrlKey键
altKey 判断是否按下了alt键
metaKey 判断是否按下了windows键,IE不支持
eg:
<script>
    window.onload = function(){
        document.onkeydown = function(e){
            if(e.ctrlKey){
                alert("按下ctrl键")//按下ctrl键弹出   按下ctrl键
            }
        }
    }
</script>

3..判断键码
eg:
<script>
    window.onload = function(){
        document.onkeydown = function(e){
            if(e.ctrlKey){
               alert(e.keyCode)//按下ctrl键弹出17
            }
        }
    }
</script>
4.阻止浏览器默认行为
        参考下一节内容
5.阻止冒泡
         参考下一节内容
6.事件委托
一般来说,dom需要有事件处理程序,我们都会直接给它设事件处理程序就好了,
那如果是很多的dom需要添加事件处理呢?比如我们有100个li,每个li都有相同
的click点击事件,可能我们会用for循环的方法,来遍历所有的li,然后给它们添
加事件,那这么做会存在什么影响呢?

在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运
行性能,因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览
器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什
么性能优化的主要思想之一就是减少DOM操作的原因;如果要用事件委托,就
会将所有的操作放到js程序里面,与dom的操作就只需要交互一次,这样就能大
大的减少与dom的交互次数,提高性能;

每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率就越大,
自然性能就越差了,比如上面的100个li,就要占用100个内存空间,如果
是1000个,10000个呢,那只能说呵呵了,如果用事件委托,那么我们就
可以只对它的父级(如果只有一个父级)这一个对象进行操作,这样我们
就需要一个内存空间就够了
eg:
<body>
<ul id = "list">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
</ul>
<script>
    var list = document.getElementById("list");
    list.onclick = function(e){
        var ev = e || window.event;
        var target = ev.target || ev.srcElement;
        if(target.tagName = "LI"){
            for(var i = 0;i<list.children.length;i++){
                list.children[i].style.background = "";
            }
            target.style.background = "blue";
        }
    }
</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏影子

jQuery中的常用内容总结(二)

14540
来自专栏www.96php.cn

Discuz后台常用函数详解

当您在编写后台时,需要对几个常用后台显示函数进行详细的了解  下面的函数讲解按照重要性、常用性进行排序 目录 ---- showsetting()表单显示  c...

80450
来自专栏lhyt前端之路

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局(重要)4. 重绘与重排(重要)5. paint(绘制)6. composite(重要)7. 浏览器加载

身为前端,打交道最多的就是浏览器和node了,也是我们必须熟悉的。接下来我们讲一下浏览器工作原理和工作过程。从url到页面的过程,......,我们直接来到收到...

25920
来自专栏一个会写诗的程序员的博客

JQuery中bind和unbind函数

测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="c...

20820
来自专栏Young Dreamer

一种实现无缝循环播放音乐方案

场景: 为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在audio标签上添加loop属性,但不幸的是,该属性并不能保证无缝循环(gapless lo...

31580
来自专栏cnblogs

DOM事件第一弹

     近期温习了部分w3c上关于DOM事件的规范,发现以前有些模糊的概念更加清晰,以及受到罗胖(罗辑思维)的影响,很是想分享自己的了解的东西,希望大家给予指...

20660
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

48740
来自专栏编程语言

Python:pygame的初步使用

4.创建窗口,pygame.display.set_mode(resolution=(0,0),flags=0,depth=0),resolution窗口大小,...

8900
来自专栏老马寒门IT

03-Vue入门系列之Vue列表渲染及条件渲染实战

3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作。最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据。如果有数据就显...

27480
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

23270

扫码关注云+社区

领取腾讯云代金券