js——事件

焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么他就可以接收用户的输入。

  我们可以通过一些方式给元素设置焦点

  1、点击

  2、tab

  3、js

  不是所有元素都能够接收焦点的.能够响应用户操作的元素才有焦点

  焦点事件:

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

    onblur : 当元素失去焦点的时候触发

  焦点方法:

    元素.focus() 给指定的元素设置焦点

    元素.blur() 取消指定元素的焦点

    元素.select() 选择指定元素里面的文本内容

event:事件对象  当一个事件发生时,和当前这个对象发生的这个事件有关的一些详细信息都会被临时保存到一个指    定的地方—event对象,供我们在需要的时候调用。

    //**

    事件对象必须在一个事件调用的函数里面使用才有内容

    事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候

    兼容性:

      ie/chrome:event是一个内置的全局对象

      标准下:事件对象是通过事件函数的第一个参数传入

      如果一个函数是被事件调用的,那么,这个函数定义的第一个参数就是事件对象

    clientX[Y] : 当一个事件发生的时候,鼠标到页面可视区的距离

事件流:事件捕获   事件冒泡

  事件冒泡:当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制

  阻止事件冒泡:当前要阻止冒泡的事件函数中调用 event.cancelBubble = true;

  //**

  给一个对象绑定一个事件处理函数的第一种形式:obj.onclick = fn;

  给一个对象的同一个事件绑定多个不同的函数

  给一个元素绑定事件函数的第二种形式:

    ie:obj.attachEvent(事件名称,事件函数);

      1、没有捕获

      2、事件名称有on

      3、事件函数执行顺序:标准ie >>正序    非标准ie  >>  倒序

      4、this指向window

    标准:obj.addEventListener(事件名称,事件函数,是否捕获);  //**是否捕获,默认为false

      1、有捕获

      2、事件名称没有on

      3、事件执行的顺序是正序

      4、this触发该事件的对象

    call():函数下的一个方法,call方法第一个参数可以改变函数执行过程中的内部的this的指向,call方法第二个参数开始就是函数的参数列表

  事件捕获:当一个对象接收事件时,事件会先经过父级元素,由父级元素一层一层传递给该对象,这个过程称为事件捕获

  取消事件绑定:

    ie:obj.detachEvent(事件名称,事件函数);

    标准下:obj.removeEventListener(事件名称,事件函数,是否捕获);

键盘事件:

  onkeydown:当键盘按键按下的时候触发

  onkeyup:当键盘按键抬起的时候触发

  event.keyCode:数字类型  键盘按键的值  键值

    功能键:ctrlKey   shiftKey    altKey    布尔值

    当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false

  不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能够接收键盘事件

  事件默认行为:当一个事件发生时,浏览器自己会默认做的事情

  怎么阻止?

  分析当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false;

  oncontentmenu:右键菜单事件,当右键菜单(环境菜单)显示出来的时候触发

时间: 2024-12-27 14:05:26

js——事件的相关文章

js事件冒泡和事件委托

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: 1 <ul class="clearfix" data-type="cityPick"> 2 <li class="active_sort_opts" data-id="0">全部</li> 3 <li data-id="88">纽约</li> 4 <

特殊js事件

1:点击enter事件 $(document).keypress(function(e) { // 回车键事件 if(e.which == 13) { submitForm(); } }); 2:JQUERY表单ajax提交事件 1):添加js插件 2):添加js事件 function submitForm(){ $.ajax({ url:'${root}/doLogin', data:$('form').serialize(), dataType:'json', cache:false, ty

JS事件(事件冒泡和事件捕获)

事件流:描述的是在页面中接收事件的顺序 事件冒泡:由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档) 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件 DOM中:用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener().他们都接收三个参数:要处理的事件名.作为事件处理程序的函数和布尔值(事件处理的时候)[true:事件捕获时;false:事件冒泡时] DOM中的事件对象: type属性 用于获取事件类

略谈js事件

 本人是这样从做学的js事件分成以下三个方面: 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级.这里所谓的高级是指,当用户按下shift +

js事件的三个阶段

js事件的三个阶段分别为:捕获.目标.冒泡 1.捕获:事件由页面元素接收,逐级向下,到具体的元素 2.目标:具体的元素本身 3.冒泡:跟捕获相反,具体元素本身,逐级向上,到页面元素 IE5.5:div---body---document IE6.0:   div---body---html---document Mozilla:div---body---html---document---window 事件捕获:当使用事件捕获时,父级元素先触发,子元素后触发 事件冒泡:当使用事件冒泡时,子级元素

JS中的函数、Bom、DOM及JS事件

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名

js事件对象坐标

js事件对象坐标---贴上代码 <body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;"> <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick=&qu

JS的Touch事件们,触屏时的js事件

丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如iphone.ipod Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel事件,分别对应了触屏开始.拖拽及完成

Js事件大全

一般事件 事件 浏览器支持 描述  onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击  onDblClick IE4|N4|O 鼠标双击事件  onMouseDown IE4|N4|O 鼠标上的按钮被按下了  onMouseUp IE4|N4|O 鼠标按下后,松开时激发的事件  onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件  onMouseMove IE4|N4|O 鼠标移动时触发的事件  onMouseOut IE4

js事件浅析

js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮');">点击这个按钮</button> 二. 属性绑定(DOM0级事件) 只能绑定一个函数 button.onclick = function() {}; 三. 事件监听函数(DOM2级事件) element.addEventListener(<event-name>, &