JS 事件机制完整示例分析
本文实例讲述了JS 事件机制。分享给大家供大家参考，具体如下：
<html>
<head>
<title>js事件机制</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
function testOnclick(){
alert("我是单击事件");
}
function testdblOnclick(){
alert("我是双击事件");
}
function testOnmouseover(){
alert("我是鼠标悬停事件");
}
function tsetOnmousemove(){
alert("我进行了移动");
}
function testOnmouseout(){
alert("我被移出了");
}
function testOnkeydown(){
alert("键盘按下事件");
}
function testOnkeyup(){
alert("键盘抬起事件");
}
function testOnkeypress(){
alert("键盘按压事件触发")
}
function testOnfouse(){
alert("焦点确认定位");
}
function testOnblur(){
alert("我失去了焦点");
}
function tsetOnload(){
alert("页面进行了重新加载");
}
// tsetOnload();
function testOnchange(){
alert("发生了改变");
}
function testbreak(){
alert("阻断事件触发");
}
function testbreaktrue(){
alert("阻断，我可不只是说说");
return false;
}
function testHref(){
alert("超链接提示");
}
</script>
<style type="text/css">
#showdiv{
width: 100;
height: 200;
border: solid 1px;
}
input[type=text]{
width: 300px;
height: 20px;
border: solid 2px aqua;
}
hr{
height: 10px;
background-color: bisque;
border-radius: 10px;
}
</style>
</head>
<body onload="tsetOnload();">
<h3>js事件机制</h3>
<input type="button" id="" value="测试单击" onclick="testOnclick();"/>
<input type="button" id="" value="测试双击" ondblclick="testdblOnclick();"/>
<hr />
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="tsetOnmousemove();" onmouseout="testOnmouseout();" >
</div>
<hr />
<!--下面在文本框中添加的事件触发有事件的冲突，onkeydown和onkeypress会在按下一个按键的时候触发，但是由于触发了显示框事件导致按下按钮后一直出现，而使onkeyup无法触发-->
<input type="text" id="" value="" onkeydown="testOnkeydown()" onkeyup="testOnkeyup();" onkeypress="testOnkeypress();"/>
<hr />
<!--失去焦点的时候会一直显示，因为在失去焦点操作中使显示框显示，其本来就是一个失去焦点的操作-->
<input type="text" name="" id="" value="" onfocus="testOnfouse()" onblur="testOnblur()"/>
<br />
<input type="text" name="" id="" value="" onchange="testOnchange();"/>
<br />
比较喜欢的动漫角色:<br />
<select name="" id="" onchange="testOnchange();">
<option value="">古河渚</option>
<option value="">藤和艾利欧</option>
<option value="">佐仓千代</option>
<option value="">筒隐月子</option>
</select>
<hr />
<!--<a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="testbreak();">百度一下</a>-->
<hr />
<a href="http://wwww.baidu.com" rel="external nofollow" rel="external nofollow" target="_blank" onclick="return testbreaktrue();">百度一下</a> <!-- 必须函数和调用都含有return才能进行有效的阻断-->
<hr />
<a href="javascript:testHref()" rel="external nofollow" >超链接点击</a>
</body>
</html>
事件触发机制使为了更好的实现网页与用户的交互，如果仅仅只在js代码域中定义函数，那么我们仅仅只能在代码中自己调用，用户无法触发函数，所以我们利用函数对一系列操作进行封装，在body中调用事件触发机制进行调用，这样当用户触发某个事件的时候就会触发一系列的操作。
注：在一系列的事件触发机制中，我们可以在一个标签中添加多个事件触发机制，但是我们必须在适当的地方设置，而且，对于多个事件机制其也会产生冲突，一个方面可能是因为触发机制的冲突（比如单双击）另一方面可能因为调用的函数引起的（比如焦点失去和显示框显示）
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
深入理解JS DOM事件机制
1.事件流 html 元素触发事件的顺序. 2.事件冒泡IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档).3.事件捕获事件捕获的思想是不太具体的节点应该更早的接收到事件,而最具体的节点应该在最后接收到节点.事件捕获的用意在于事件到达预定目标之前捕获它. DOM事件流 "DOM2级事件流"规定的事件流包括三个阶段:事件捕获阶段.处于目标阶段和冒泡阶段.首先发生的是事件捕获,
-
浅析JavaScript中的事件机制
事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档对象模型(DOM)第3级,每一个HTML元素的一部分有一套可以触发JavaScript代码事件. 例子:
-
node.js的事件机制
首先, 补充下对node 的理解: nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发, 所以性能非常高~ 那么什么是单进程单线程呢~(写给语文跟我一样不好的小伙伴) 我们来看下单进程和多进程的区别: 1. 多进程的优势在于任务的独立性,比如某个任务单独作为一个进程的话,崩溃只影响自己的服务,其他任务不受影响.如果是多个任务在同一个进程内部利用多个线程进行处理,某个线程发生了未处理的异常的话,会导致整个进程完蛋,所有的任务跟着遭殃 2. 从资源分配上来说,多进程方案比多线
-
谈一谈JS消息机制和事件机制的理解
消息/事件机制是几乎所有开发语言都有的机制,并不是deviceone的独创,在某些语言称之为消息(Event),有些地方称之为(Message). 其实原理是类似的,只不过有些实现的方式要复杂一点.我们deviceone统一就叫消息. 消息基础概念 还有一些初学者不太熟悉这个机制,我们先简单介绍一些基础概念,如果熟悉的人可以跳过这个部分. 一个/条消息可以理解为是一个数据结构,包含以下几个基本部分: 1.消息源:就是消息的来源,发出这个消息的对象 2.消息名:就是消息的唯一标示 3.消息数据:消
-
JavaScript的事件机制详解
事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细探讨JavaScript的事件机制,并对比分析了浏览器之间的不同,具体内容包括事件流.事件处理程序绑定方式.事件对象等. 如何理解事件? JavaScript与HTML之间的交互就是通过事件实现的. 事件:用户或浏览器自身执行的某种动作,换言之,文档或浏览器发生的一些特定的交互瞬间. 事件处理程序:又称事件侦听器,事件发生时执行的代码
-
深入解析JavaScript框架Backbone.js中的事件机制
事件模型及其原理 Backbone.Events就是事件实现的核心,它可以让对象拥有事件能力 var Events = Backbone.Events = { .. } 对象通过listenTo侦听其他对象,通过trigger触发事件.可以脱离Backbone的MVC,在自定义的对象上使用事件 var model = _.extend({},Backbone.Events); var view = _.extend({},Backbone.Events); view.listenTo(model
-
ExtJs事件机制基本代码模型和流程解析
代码实现的目的:为一个自定义的类的某个属性在使用它时候,触发某个事件. 该程序的效果:点击输入按钮,弹出一个脚本提示输入框让用户输入他的姓名,确定后,用户录入的姓名会显示在页面的姓名文本框中,并且页面标题变成和姓名一致,接着再弹出脚本提示输入框让用户输入性别,录入完毕并点击确定后,用户录入的性别将会显示在页面的性别文本框里. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
-
JS内部事件机制之单线程原理
任务队列 主线程:正在执行的代码,会生成函数调用栈. macro-task(宏任务,新名:task)包括:script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering. micro-task(微任务,新名:jobs)包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性,队列中只能有一个) 任务分类 同步任务,语句只按
-
详解Node.js中的事件机制
前言 在前端编程中,事件的应用十分广泛,DOM上的各种事件.在Ajax大规模应用之后,异步请求更得到广泛的认同,而Ajax亦是基于事件机制的. 通常js给我们的第一印象就是运行在客户端浏览器上面的脚本,通过node.js我们可以在服务端运行javascript. node.js是基于单线程无阻塞异步式的I/O,异步式的I/O指的是当遇到I/O操作的时候,线程不阻塞而是进行下面的操作,那么I/O操作完成之后,线程时如何知道该操作完成的呢? 当操作完成耗时的I/O操作之后,会以事件的形式通知I/O操
-
利用Javascript实现一套自定义事件机制
前言 事件机制为我们的web开发提供了极大的方便,使得我们能在任意时候指定在什么操作时做什么操作.执行什么样的代码. 如点击事件,用户点击时触发:keydown.keyup事件,键盘按下.键盘弹起时触发:还有上传控件中,文件加入前事件,上传完成后事件. 由于在恰当的时机会有相应的事件触发,我们能为这些事件指定相应的处理函数,就能在原本的流程中插入各种各样的个性化操作和处理,使得整个流程变得更加丰富. 诸如click.blur.focus等事件是原本的dom就直接提供的原生事件,而我们使用的一些其
-
深入理解Vue.js源码之事件机制
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出
-
javaScript事件机制兼容【详细整理】
[添加事件机制] addEventListener 和 attachEvent [W3C] addEventListener('click' , function(){alert('Hello World')} ,false ) //W3C规范添加事件(IE8及以上不兼容): 第一个参数为事件类型 ,第二个为事件程序 ,第三个 false为事件冒泡,true为事件捕获 [IE] attachEvent('onclick',function(){alert('Hello World')}