`
SIHAIloveYAN
  • 浏览: 119369 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

JavaScript教程之事件处理

 
阅读更多

1、什么是事件

通过鼠标、键盘对浏览器页面所做的动作就是事件。
事件一旦发生需要有事件处理，该处理称为“事件驱动”，事件驱动通常由函数担任
onclick：鼠标点击
onmouseover：鼠标移入
onmouseout：鼠标移出
onkeyup：键盘按下并抬起
onkeydown：键盘按下
onchange：内容改变
onblur：失去焦点
onfocus：获得焦点
onsubmit：表单提交

2、设置事件

2.1、dom一级事件设置

①<input  type=”text”  onclick=”函数名称()” />
    function 函数名称(){this[window]}

②<input  type=”text” onclick=”过程代码this[itnode]” />

③itnode.onclick = function(){this[itnode]}  匿名函数

④itnode.onclick = 函数名称;   有名函数
    function 函数名称(){this[itnode]}

取消dom1级事件：
itnode.onclick = null;

2.2、dom二级事件设置

1) 主流浏览器方式(包括IE9以上 版本浏览器)：
itnode.addEventListener(事件类型，事件处理[，事件流]);       //设置
itnode.removeEventListener(事件类型，事件处理[，事件流]);    //取消
2) IE浏览器方式(IE6/7/8)：
itnode.attachEvent(事件类型，事件处理);      //设置
itnode.detachEvent(事件类型，事件处理);  //取消

    事件类型：就是我们可以设置的具体事件，例如onclick/onmouseover等
              主流浏览器方式没有”on标志”，例如addEventListener(‘click’，...);
              IE浏览器方式有”on”标志，例如attachEvent(‘onclick’)
    事件处理：事件驱动，可以是一个有名/匿名 函数
              例如addEventListener(‘click’,function(){}/有名函数);
    事件流：true捕捉型、[false冒泡型]

事件取消(removeEventListener/detachEvent)操作具体要求：
①   事件处理 必须是有名函数，不可以是匿名函数。
②   事件取消的参数与绑定的参数完全一致(数量/内容)

dom2级事件设置的特点：
①   可以为同一个对象设置多个同类型事件。
②   事件取消也非常灵活。
③   对事件流也有很好的处理控制。

<html>
    <head>
        <title>事件设置</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        </script>

        <style type="text/css">
        div{width:300px; height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <h2>dom2级事件设置</h2>
        <div>Today is cloud</div>
    </body>
</html>
<script type="text/javascript">
//给div进行事件的设置
var dv = document.getElementsByTagName('div')[0];
//dv.addEventListener(事件类型，事件处理[，事件流]);
dv.addEventListener('click',function(){
    //事件处理过程
    dv.style.backgroundColor = "lightblue";
});

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        </script>

        <style type="text/css">
        div{width:300px; height:200px; background-color:pink;}
        </style>
    </head>
    <body>
        <h2>dom2级事件取消操作</h2>
        <div>everyday is beautiful</div>
        <input type="button" value="取消" onclick="cancel()" />
    </body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
//事件取消操作
function cancel(){
    //有名函数可以取消，并且事件"取消参数"与"绑定参数"完全一致
    dv.removeEventListener('click',f1);
    dv.removeEventListener('mouseover',over);
}

dv.addEventListener('click',function(){ dv.style.backgroundColor = "lightblue";});

dv.addEventListener('click',function(){ console.log('I am here');});

function over(){dv.style.backgroundColor = "lightgreen";}
dv.addEventListener('mouseover',over);//直接拔事件处理函数名字设置上(没有()括号的)

function out(){dv.style.backgroundColor = "pink";}
dv.addEventListener('mouseout',out);



</script>

3、事件流

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”
事件流分为两种类型（如果学过flash的话，可以看出非常相似）：
冒泡型：事件从内部往外部依次执行。
捕捉型：事件从外部往内部依次执行。
//addEventListener(类型，处理，事件流true捕捉/[false冒泡]);

IE浏览器从开始到后期事件流始终是“冒泡型”的，直到IE9以后版本两种都开始支持。
网景的Navigator浏览器(现在火狐浏览器的许多血统来源于navigator浏览器)一开始的事件流是”捕捉型”。后期事件流有改进，针对捕捉型、冒泡型都可以支持。

4、事件对象

事件对象，每个事件(包括鼠标、键盘事件)触发执行的过程中，都有对应的事件对象，通过事件对象可以获得鼠标相对页面的坐标信息、通过事件对象也可以感知什么键子被 触发执行、通过事件对象还可以阻止事件流产生、阻止浏览器默认动作。

4.1、获取事件对象

①主流浏览器(IE9以上版本浏览器)：
    事件处理函数的第一个形参就是 事件对象
    例如：
    node.onclick = function(evt){evt就是事件对象}
    addEventListener(类型,function(evt){}/函数名字);
        function 函数名称(evt){}
    红色的evt就是事件对象
② IE(6/7/8)浏览器
    node.onclick = function(){window.event事件对象}
    全局变量event就是事件对象
全局变量直接上级对象是window。可以通过window访问全局变量信息。
window.document.getElementById()

4.2、事件对象的作用

1) 获得鼠标的坐标信息
    event.clientX/clientY;    //相对dom区域坐标
    event.pageX/pageY;        //相对dom区域坐标，给考虑滚动条距离
    event.screenX/screenY;    //相对屏幕坐标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        </script>

        <style type="text/css">
        div{width:700px; height:3000px; background-color:pink;}
        </style>
    </head>
    <body>
        <h2>事件对象作用</h2>
        <div>Today is very good</div>
    </body>
</html>
<script type="text/javascript">
//获得鼠标坐标
var dv = document.getElementsByTagName('div')[0];
dv.onclick = function(evt){
    console.log(evt.clientX+"---"+evt.clientY);//372---287 相对dom区域坐标
    console.log(evt.pageX+"---"+evt.pageY);//372---2969 相对dom区域坐标，给计算滚动条距离
    console.log(evt.screenX+"---"+evt.screenY);//850---310 相对屏幕坐标
}
</script>
2) 阻止事件流：
    event.stopPropagation();  //主流浏览器
    window.event.cancelBubble = true; // IE(678)浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        </script>

        <style type="text/css">
        div{width:400px; height:300px; background-color:pink;}
        p{width:300px; height:200px; background-color:lightgreen;}
        span{background-color:lightblue;}
        </style>
    </head>
    <body>
        <h2>事件流效果</h2>
        <div>
            <p>
                <span>哈哈哈哈</span>
            </p>
        </div>
    </body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
var ps = document.getElementsByTagName('p')[0];
var sn = document.getElementsByTagName('span')[0];
dv.addEventListener('click',
    function(evt){
        console.log('11111');
        evt.stopPropagation(); //阻止事件流
    });
ps.addEventListener('click',
    function(evt){
        console.log('22222');
        evt.stopPropagation(); //阻止事件流
    });
sn.addEventListener('click',
    function(evt){
        console.log('33333');
        evt.stopPropagation(); //阻止事件流
    });
</script>
3) 感知被触发键盘键子信息
    event.keyCode  获得键盘对应的键值码信息
    通过事件触发时候获得的keyCode数值码信息可以对应键盘的键子信息。

4) 阻止浏览器默认动作
    浏览器默认动作，注册form表单页面，提交表单的时候，浏览器的页面会根据action属性值进行跳转，这个动作称为“浏览器默认动作”。
form表单提交的时候，需要对各个表单域进行验证，如果验证失败则禁止浏览器跳转。

    event.preventDefault();     //主流浏览器(dom1和dom2级事件都起作用)   
    event.returnValue = false;  //IE(678)浏览器
    return  false;              //dom1级事件设置起作用

5、加载事件onload

什么是加载事件：
js代码执行时候，需要html&css的支持，就让html代码先执行(先进入内存)，js代码后执行
js代码在最后执行的过程就是“加载过程”，通常通过“加载事件”实现加载过程

加载事件onload可以保证js代码后于html&css执行，其要在最后执行。
具体设置：
    <body onload=”加载函数()”>
    window.onload = 匿名/有名 函数;  //推荐
<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
分享到：
| JavaScript教程之DOM和BOM
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    阮一峰JavaScript教程.pdf

    阮一峰JavaScript教程.pdf 阮一峰JavaScript教程是一本系统的JavaScript教程，涵盖了JavaScript语言的核心语法、数据类型、函数、数组、对象、异步操作、DOM操作等方面的知识点。下面是该教程的详细知识点总结： ...

    现代JavaScript教程

    总的来说，"现代JavaScript教程"会涵盖以上这些关键主题，并可能深入到更多细节，如错误处理、性能优化、TypeScript等。通过系统学习和实践，开发者可以提升JavaScript技能，从而在Web开发领域取得成功。

    JavaScript标准参考教程

    《JavaScript标准参考教程》是一本全面介绍JavaScript编程语言的书籍，其内容涵盖了从基础语法、数据类型、函数到高级特性如数组操作、错误处理、编程风格等各个方面的知识。阮一峰作为作者，将多年的经验和网络资料...

    JavaScript小技巧全集 JavaScript教程 JavaScript源代码集

    JavaScript的事件处理机制也是其核心特性之一。通过添加事件监听器，可以响应用户的点击、鼠标移动等行为。例如，给按钮添加点击事件： ```javascript document.getElementById("myBtn").addEventListener("click", ...

    JavaScript教程源代码

    JavaScript教程源代码是学习Web开发不可或缺的一部分，尤其对于前端开发者来说更是基础中的基础。这个教程逐步深入，旨在帮助初学者和有一定经验的开发者巩固和提升JavaScript技能。 在JavaScript的世界里，首要...

    JavaScript 教程（CHM格式）.rar

    事件处理也是JavaScript与用户交互的重要部分，如点击事件、鼠标移动事件等。 8. AJAX和Fetch API：用于实现异步通信，使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX是...

    JavaScript基础教程（pdf版）

    总的来说，这个JavaScript教程系列涵盖了从基础到进阶的所有重要知识点，无论你是网页开发者还是希望增强Web应用功能的程序员，都能从中受益匪浅。通过深入学习和实践，你将能够熟练运用JavaScript来创建交互式、...

    javascript初学教程 多本 pdf

    3. **第3章 JavaScript事件处理**：JavaScript通过事件驱动与用户进行交互，这一章将涵盖事件监听器、事件处理程序、事件对象以及常见的DOM事件，如点击、鼠标移动、键盘输入等。 4. **第4章 JavaScript基于对象...

    javascript教程打包（原创）1

    JavaScript教程打包（原创）1是针对初学者和进阶者的一套全面的JavaScript学习资源，旨在帮助用户深入了解和掌握这门强大的脚本语言。在这个压缩包中，主要包含了一个名为"javascript1"的文件，我们可以推测这是一个...

    javascript教程

    总的来说，JavaScript教程的学习不仅涉及语言本身，还包括其在Web开发中的实际应用，以及与之相关的DOM操作、异步编程、框架使用等多个方面。无论你是初学者还是有经验的开发者，深入理解并熟练掌握JavaScript都将对...

    JavaScript入门教程

    第3章 JavaScript事件处理 第4章 JavaScript基于对象编程 第5章 文档对象模型 DOM 第6章 String Math Array等数据对象 第7章 Window及相关顶级对象 第8章 Document对象"&gt;该资源为8个PDF文档教程 适合JS开发初学者 ...

    阮一峰 JavaScript 教程.pdf

    - **事件**: 包括 EventTarget、Event、各种事件处理接口等，用于处理用户交互。 #### 异步操作 - **定时器**: 如 setTimeout 和 setInterval，用于在指定时间后执行代码。 - **Promise 对象**: 用于处理异步操作，...

    javascript教程.ppt(推荐)

    在JavaScript中，事件处理程序是响应用户或系统事件的函数。例如，你可以为按钮添加点击事件监听器，当用户点击按钮时，执行相应的函数。例如： ```javascript ('按钮被点击了！')"&gt;点击我 ``` 在这个例子中，`...

    JavaScript 案例教程源码

    JavaScript，作为全球最广泛使用的编程语言之一，是创建交互式网页和动态应用的关键工具。这份"JavaScript案例教程源码"提供了丰富的学习资源，让你能够直接运行代码并观察其运行效果，从而深入理解JavaScript的核心...

    JavaScript基础教程 精简版

    总结，这个精简版的JavaScript基础教程涵盖了语言的基本要素，从数据类型、运算符到控制流，再到对象、函数和事件处理，为初学者提供了一个全面的入门框架。理解并熟练运用这些知识点，是成为JavaScript开发者的首要...

    Javascript教程

    ### JavaScript教程核心知识点详解 #### 一、JavaScript的背景与意义 随着互联网技术的迅猛发展，人们对于在线信息的需求越来越多样化。传统的HTML虽然能够展示文本和图片，但缺乏与用户的互动性。在这种背景下，...

    Javascript基础教程.doc

    #### 三、JavaScript教程概述 本教程设计为期五天的学习计划，旨在快速提升参与者对JavaScript的理解和应用能力，通过实践构建梦想中的浏览器。教程将涵盖以下关键主题： - **第一天**：介绍JavaScript的基本概念，...

Magicbox
Global site tag (gtag.js) - Google Analytics