JavaScript事件概览

简介:

JavaScript是单线程,在同一个时间点,不可能同时运行两个“控制线程”。

事件句柄和事件对象

1.注册事件句柄

标准和非标准

var button=documenbt.elementByID("#button");button.addEventListener('click',function(){
    //do something.},false);//第三个参数表明事件是否阻止冒泡。true阻止冒泡,false类似默认行为一样进行事件冒泡。
var button=documenbt.elementByID("#button");button.attachEvent('onclick',function(){
    //do something.});

早期兼容性代码,查看浏览器支持哪种事件模型:

function registerEventHandler(node,event,handler){
            if(typeof node.addEventListener=='function'){
                node.addEventListener(node,event,handler);
            } else{
                node.attachEvent("on"+event,hander);
            }
        }registerEventHandler(button,"click",function(){
            //to do
        });

2.获得事件对象

标准 event

非标准: window.event

兼容性代码:

registerEventHandler(document.body,"click",function(event){
            event=event||window.event;
            print(event.clientX,",",event.clientY);
        });

3.从事件对象中获取数据

鼠标事件,event对象中的属性(部分):
59618-20160805140902043-1398533542.png

4.标记事件已经完成

function unregisterEventHandler(node,event,handler){
            if(typeof node.removeEventListener=='function'){
                node.removeEventListener(node,event,handler);
            } else{
                node.detachEvent("on"+event,hander);
            }
        }registerEventHandler(button,"click",function(){
            //to do
        });

事件类型

1.鼠标事件,
2.键盘事件
3.停止行为
事件冒泡和阻止默认行为。标准和非标准如下:

阻止事件冒泡:
event.stopPropagation

cancelBubble

阻止默认行为:
event.preventDefault();

returnValue=false;

4.跟踪焦点事件
focus和blur

5.表单事件
submit事件

6.window事件

load事件:在文档完全加载完毕时触发

resize事件: 每次窗口发生改变时被触发

scroll事件: 文档滚动的时候,浏览器都会触发window对象上的scroll事件




本文转自 sshpp 51CTO博客,原文链接:http://blog.51cto.com/12902932/1926238,如需转载请自行联系原作者
相关文章
|
JavaScript 前端开发
JavaScript 数组方法概览
【5月更文挑战第11天】JavaScript 数组方法概览:push() 添加元素至末尾;pop() 删除并返回最后一个元素;shift() 删除并返回第一个元素;unshift() 向开头添加元素;slice() 返回指定范围的浅拷贝;splice() 删除/替换/添加元素,改变原数组;concat() 合并数组;join() 转换为字符串;reverse() 颠倒顺序;sort() 排序;map() 应用函数并创建新数组;filter() 过滤元素;reduce() 累加元素为单一值。
139 1
|
12月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
JavaScript 前端开发
JavaScript进阶-ES6新特性概览:let, const, arrow functions
【6月更文挑战第19天】ES6的`let`和`const`带来了变量声明的变革,解决了`var`的提升和作用域问题。`let`有块级作用域,避免了循环中的变量共享;`const`声明常量,值不可变但内容可变(如数组和对象)。箭头函数简化了函数定义,其`this`绑定遵循上下文,不具自己的`arguments`。这些特性提升了代码质量和可读性。
180 2
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
132 2
|
SQL 自然语言处理 前端开发
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
105 2
|
SQL 自然语言处理 JavaScript
【JavaScript】ECMAS6(ES6)新特性概览(一):变量声明let与const、箭头函数、模板字面量全面解析
ES6,作为ECMAScript 2015的简称,标志着JavaScript编程语言的一个重要进化节点。它不是渐进的变化,而是一次飞跃式的更新,为开发者带来了一系列强大的新特性与语法糖,极大提升了代码的简洁性、可读性和运行效率。从新的变量声明方式let与const,到优雅的箭头函数、模板字符串,再到让对象操作更为灵活的解构赋值与增强的对象字面量,ES6的每项改进都旨在让JavaScript适应日益复杂的应用场景,同时保持其作为脚本语言的活力与魅力。本文是深入探索这些核心特性的起点,为你铺开一条通向高效、现代JavaScript编程实践
127 0
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
JavaScript 前端开发
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
233 2