精华内容
下载资源
问答
  • 其中原始的事件模型被所有浏览器所支持 ,而 DOM2 中所定义的事件模型目 前被除了 IE 以外所有主流浏览器支持 一原始事件模型 其事件类型 :分为 "输入事件 (如 onclicki" 和" 语义事件 (如 onsubmit" 事件程序...
  • javascript常见的事件

    2020-06-25 09:41:32
    js事件常见的事件事件三要素事件的绑定方式浏览器事件鼠标事件表单事件鼠标事件对象光标的位置键盘事件(一般只给可以输入内容的元素绑定 或者 window绑定)键盘事件对象事件冒泡阻止冒泡事件阻住默认行为事件委托 ...

    常见的事件

    事件三要素

    • 事件源
    • 事件类型
    • 事件处理函数
        let box = document.querySelector(".box")
        box.onclick = function () {
          console.log(1);
        }
        //事件源 --- box
        //事件类型 --- click (on为绑定事件的一种方式)
        //事件处理函数 ---函数
    

    事件的绑定方式

    • 第一种:使用on的方式来绑定事件
      上面的click 是点击事件(事件类型)
      使用的是on来绑定事件!把click事件绑定在box身上
      *注意点:使用on来绑定事件的时候,只能给元素ele绑定一个事件
      *拓展点:需要给元素ele绑定多个事件,则需要使用高级事件 ele.addEventListener

    • 第二种:使用监听事件的方式来绑定事件
      ele.addEventListener(“事件类型(click等等)”,“事件委托(ul li)”,function(){})

      • 优点:可以给同一个事件源添加多个绑定事件
      • 缺点:ie8以及以下都无法使用
        box.addEventListener("click", function () {
          console.log(1);
        })
        box.addEventListener("mouseover", function () {
          console.log(2);
        })
    
    • 第三种:
      ele.attachEvent(“onclick”,function(){})
      • 优点:可以在ie8及以下给元素绑定多个事件
      • 缺点:但是在高本版浏览器中是不被识别的

    浏览器事件

    • 【1】onload 当浏览器加载完毕页面的html,css图片等之后,在执行js脚本
    • 【2】onscroll 滚动条事件,当页面中的滚动条滚动的时候会触发这个事件
      • 经常搭配使用的是:
        • scrollY :浏览器滚动的位置
        • ele.offsetTop:来获取到某个元素距离文档的偏移量(若是父元素有定位,则以父元素的偏移量)
        • scrollTo : 需要跳转到顶部等的设置(里面是个对象{top:0,left:0}或者scrollTo(0,0)
    • 【3】onresize 当window宽口发送变化的时候触发该事件
      注意点:浏览器的定义对象是window
        //返回顶部事件
        var timer;
        goback.onclick = function () {
          clearInterval(timer)//点击事件的时候,启动定时器的时候,先清除上一个定时器!
          timer = setInterval(function () {
            scrollTo({//top: scrollY - 20, 使用定时器和这个来实现滚动条的丝滑回滚效果!
              top: scrollY - 20,
            })
            if (scrollY <= 0) {
              clearInterval(timer)
            }
          }, 10)
        }
    

    鼠标事件

    • 【1】onclick 单击事件,鼠标按下和抬起的结合
    • 【2】ondblclick 双击事件,连续点两次单击事件就是一个双击事件
    • 【3】oncontextmenu 菜单事件(右键事件)
    • 【4】onmousedown 鼠标按下事件
    • 【5】onmouseup 鼠标抬起事件
    • 【6】onmouseover onmouseenter 鼠标移入事件
    • 【7】onmouseout onmouseleave 鼠标移出事件
      • 注意点:onmouseenter、onmouseleave这两者不存在冒泡事件
    • 【8】onmousemove 鼠标移动事件

    表单事件

    • 【1】oninput 输入事件
    • 【2】onchange 内容事件 当内容改变时候并且失去焦点时候触发的事件
    • 【4】onfocus 表单聚焦事件
    • 【5】onblur 表单失去焦点触发事件
    • 【6】OnSubmit 表单提交按钮被点击时发生的事件。

    鼠标事件对象

    e = e || window.event

    • e.type — 事件类型
    • e.button — 记录按钮按下的那个键
      0 — 代表的是鼠标的左键
      1 — 代表的时候滚动点击
      2 — 代表的是右键点击
    • e.target —事件目标(就是触发事件的目标)

    光标的位置

    • e.clientX —鼠标点击的位置 距离可视区的left的位置
    • e.clientY —鼠标点击的位置 距离可视区的top位置
    • e.offsetX —鼠标点击的位置 获取到的是,鼠标点击在那个元素,于是鼠标距离此元素的位置
      比如事件绑定在父元素身上,然后点击子元素,所求的的e.offsetX,这是距离子元素中的左侧位置(找距离该元素的最近为参照物,带有定位!)
      • 常常可以借助一个遮罩层,显示在最顶层,然后以这个为参照物,于是获取鼠标在参照物的坐标,赋值给小灰盒的坐标,可以实现放大镜的那个小灰盒!
    • e.offsetY —鼠标点击的位置,获取到的是,鼠标所点击在元素,于是鼠标距离此元素的位置
    • e.pageX —鼠标点击的位置,距离文档左侧的位置距离
    • e.pageY —鼠标点击的位置,距离文档顶部的位置距离
      在这里插入图片描述

    键盘事件(一般只给可以输入内容的元素绑定 或者 window绑定)

    • 【1】onkeydown
      • 鼠标按下的时候触发
      • 可以同时监听多个键盘事件
      • 不区分大小写,但是能识别功能键
    • 【2】onkeyup
      • 只能监听键盘抬起事件
      • 不区分大小写,但是能识别功能键
    • 【3】onkeypress
      • 鼠标按下的时候触发
      • 区分大小写,但是不识别功能键

    键盘事件对象

    • e.which 如果是 keydown 或者 keyup事件的时候 得到是 键盘的编码
      • e.which 如果按下的 keypress 得到的值 字符的 ASCII码
      • e.key 得到 键盘 字符
      • e.altKey 表示你按下的是否是 alt
      • e.ctrlKey
      • e.shiftKey
      • e.keycode 表示键盘的键码
      • e.keyCode —获取键盘的keyCode值(AsII值)
        注意:keyup,keydown 不区分大小写 keypress区分大小写 A-97 a-65
        注意点2:一般能够输入的表单有input和textarea,或者触发的是window

    事件冒泡

    • 【1】事件捕获
      • 就是从文档逐层向下寻找,直到找到目标阶段为止
    • 【2】事件冒泡
    • 就是从当前目标阶段逐层向上冒泡,直到冒泡到文档为止
    • 【3】当前目标阶段

    阻止冒泡事件

    • e.stopPrapagation()
    • e.cancellBubble = true

    阻住默认行为

    • e.preventDefaulte
      • 阻住默认行为:比如a链接的自动跳转,还有鼠标的右击事件,提交按钮不提交
        e.preventDefault();
      • 禁止鼠标选中 —selectstart

    阻住默认行为

    • e.preventDefaulte
      • 阻住默认行为:比如a链接的自动跳转,还有鼠标的右击事件,提交按钮不提交
    • e.preventDefault();
      • 禁止鼠标选中 —selectstart
    • e.returnValue = false
      • 阻住默认行为
    • return false
      • 阻住默认行为
        //1:禁止鼠标右键菜单事件 ---contextmenu
        document.addEventListener("contextmenu", function (e) {
          e.preventDefault();
        })
        //2:禁止鼠标选中 ---selectstart
        document.addEventListener("selectstart", function (e) {
          e.preventDefault();
        })
    

    事件委托

    就是原本给所有子元素绑定点击事件,但是可以直接委托给父元素绑定点击事件
    鼠标点击子元素的时候,会触发父元素的点击事件,于是完成事件委托
    e.target —得到点击的真正事件源(也就是你点击的当前子元素)

    • 优点:
      • 提高性能:因为每一个函数都会占用空间,而事件委托只有一个函数,节省空间
      • 可以动态监听事件:使用事件委托,可以动态监听事件,即使后面添加的事件,也会被监听到!
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
      <button class="btn">点击生成</button>
        let ul = document.querySelector("ul")
        let btn = document.querySelector(".btn")
        btn.onclick = function () {
          let li = document.createElement("li")
          li.innerHTML = "我是新"
          ul.appendChild(li)
        }
    
        //事件委托,不用循环给li添加绑定事件,只要是li的父元素都可以添加绑定事件,然后通过冒泡事件传播!
        ul.addEventListener("click", function (e) {
          console.log(e.target); //e.target 代表的是:你点击了谁,就指定了点击的目标对象
          //点击btn新创建的元素还是可以触发点击事件的
    
        })
        let lis = document.querySelectorAll("ul li")
        lis.forEach(function (item, i) {
          lis[i].onclick = function (e) {
            console.log(e.target); //点击btn新创建的元素不可以触发点击事件的
          }
        })
    

    右键菜单事件

    html
      <div class="contextMenu">
        <ul>
          <li class="copy">复制<span>Ctrl+C</span></li>
          <li class="paste">粘贴<span>Ctrl+V</span></li>
          <li class="cut">剪切<span>Ctrl+X</span></li>
          <li class="delete">删除<span>Del</span></li>
          <li class="save">保存<span>Ctrl+S</span></li>
        </ul>
      </div>
    
    css
        ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }
    
        .contextMenu {
          display: none;
          position: absolute;
          top: 0;
          left: 0;
          padding: 2px;
          width: 220px;
          border: 1px solid #ddd;
        }
    
        .contextMenu li {
          position: relative;
          padding-left: 10px;
          border-bottom: 1px dotted #ddd;
          line-height: 2.2;
        }
    
        .contextMenu li:hover {
          background-color: #efefef;
        }
    
        .contextMenu li:last-child {
          border: none;
        }
    
        .contextMenu li span {
          position: absolute;
          right: 5px;
          top: 0;
          color: #999;
        }
    
    js
     var contextMenu = document.querySelector(".contextMenu")
        //鼠标右键事件,window为事件源,触发的事件为鼠标右击事件(也就是菜单事件contextmenu)
        //需求:鼠标右键,显示自定义的菜单,首先先禁用默认的菜单
        window.oncontextmenu = function (e) {
          e.returnValue = false; //阻止默认行为,禁止右键
          //02:拿到鼠标的位置,赋值为菜单
          contextMenu.style.left = e.clientX + "px";
          contextMenu.style.top = e.clientY + "px";
          contextMenu.style.display = "block"
        }
    
        window.onkeydown = function (e) {
          // console.log(e.keyCode);
          if (e.ctrlKey && e.keyCode === 67) {
            alert("复制功能")
          } else if (e.ctrlKey && e.keyCode === 89) {
            alert("粘贴功能")
          }
        }
    

    classList 元素class集合

    • 方法:
      • classList.add(‘class名’) 给元素添加 class名
      • classList.remove(‘class名’) 移出class名
      • classList.toggle(‘class名’) 切换,如果元素中就移出,没有就添加
            .box {
                width: 200px;
                height: 200px;
                background: pink;
            }
    
            .active {
                background: orange;
            }
    
            var box = document.querySelector('.box');
            // box.onmouseover = function () {
            //     console.log(box.classList);
            //     box.classList.add('active');
            // }
            // box.onmouseout = function () {
            //     box.classList.remove('active')
            // }
            box.onclick = function () {
                box.classList.toggle('active');
            }
    
    展开全文
  • click----------------鼠标左键单击 执行完鼠标按下和抬起两个动作,才会触发 dblclick------------鼠标左键双击 contextmenu------鼠标...【注】经过当前绑定事件的标签,以及标签子级元素,都会触发事件;经过当前标.
    • click----------------鼠标左键单击 执行完鼠标按下和抬起两个动作,才会触发
    • dblclick------------鼠标左键双击
    • contextmenu------鼠标右键单击
    • mousedown-------鼠标按下 永远只会执行一次
    • mouseup----------鼠标抬起
    • mousemove-------鼠标移动
    • mouseover--------鼠标移入
    • mouseout---------鼠标移出
      【注】经过当前绑定事件的标签,以及标签的子级元素,都会触发事件;经过当前标签,只触发移入或者移出;经过子级标签:移入子级,触发,先移出当前标签,再进入子级标签;移出子级,触发,先移出子级标签,再进入父级标签
    • mouseenter------鼠标移入
    • mouseleave------鼠标移出
      【注】只有经过当前标签的边界线时会触发程序的执行经过子级标签时,不会触发
    展开全文
  • 当我们与浏览器中 Web 页面进行某些类型交互时,事件就发生了。事件可能是用户在某些内容上点击、鼠标经过某个特定元素或按下键盘上某些按键。事件还可能是 Web 浏览器中发生事情,比如说某个 Web 页面加载...

    1.什么是事件?

          当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情,比如说某个 Web 页面加载完成,或者是用户滚动窗口或改变窗口大小。

    常见事件:(http://www.runoob.com/jsref/dom-obj-event.html)

    事件
    鼠标事件
    onabort 图像的加载被中断。 ( <object>)
    onbeforeunload 该事件在即将离开页面(刷新或关闭)时触发
    onerror 在加载文档或图像时发生错误。 ( <object>, <body>和 <frameset>)
    onhashchange 该事件在当前 URL 的锚部分发生修改时触发。
    onload 一张页面或一幅图像完成加载。
    onpageshow 该事件在用户访问页面时触发
    onpagehide 该事件在用户离开当前网页跳转到另外一个页面时触发
    onresize 窗口或框架被重新调整大小。
    onscroll 当文档被滚动时发生的事件。
    onunload 用户退出页面。 ( <body> 和 <frameset>)
    表单事件
    onblur 元素失去焦点时触发
    onchange 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>)
    onfocus 元素获取焦点时触发
    onfocusin 元素即将获取焦点时触发
    onfocusout 元素即将失去焦点时触发
    oninput 元素获取用户输入时触发
    onreset 表单重置时触发
    onsearch 用户向搜索域输入文本时触发 ( <input="search">)
    onselect 用户选取文本时触发 ( <input> 和 <textarea>)
    onsubmit 表单提交时触发
    剪切板时间
    oncopy 该事件在用户拷贝元素内容时触发
    oncut 该事件在用户剪切元素内容时触发
    onpaste 该事件在用户粘贴元素内容时触发
    打印事件
    onafterprint 该事件在页面已经开始打印,或者打印窗口已经关闭时触发
    onbeforeprint 该事件在页面即将开始打印时触发
    拖动事件
    ondrag 该事件在元素正在拖动时触发
    ondragend 该事件在用户完成元素的拖动时触发
    ondragenter 该事件在拖动的元素进入放置目标时触发
    ondragleave 该事件在拖动元素离开放置目标时触发
    ondragover 该事件在拖动元素在放置目标上时触发
    ondragstart 该事件在用户开始拖动元素时触发
    ondrop 该事件在拖动元素放置在目标区域时触发
    多媒体事件
    onabort 事件在视频/音频(audio/video)终止加载时触发。
    oncanplay 事件在用户可以开始播放视频/音频(audio/video)时触发。
    oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。
    ondurationchange 事件在视频/音频(audio/video)的时长发生变化时触发。
    onemptied 当期播放列表为空时触发
    onended 事件在视频/音频(audio/video)播放结束时触发。
    onerror 事件在视频/音频(audio/video)数据加载期间发生错误时触发。
    onloadeddata 事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。
    onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。
    onloadstart 事件在浏览器开始寻找指定视频/音频(audio/video)触发。
    onpause 事件在视频/音频(audio/video)暂停时触发。
    onplay 事件在视频/音频(audio/video)开始播放时触发。
    onplaying 事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。
    onprogress 事件在浏览器下载指定的视频/音频(audio/video)时触发。
    onratechange 事件在视频/音频(audio/video)的播放速度发送改变时触发。
    onseeked 事件在用户重新定位视频/音频(audio/video)的播放位置后触发。
    onseeking 事件在用户开始重新定位视频/音频(audio/video)时触发。
    onstalled 事件在浏览器获取媒体数据,但媒体数据不可用时触发。
    onsuspend 事件在浏览器读取媒体数据中止时触发。
    ontimeupdate 事件在当前的播放位置发送改变时触发。
    onvolumechange 事件在音量发生改变时触发。
    onwaiting 事件在视频由于要播放下一帧而需要缓冲时触发。
    动画事件
    animationend 该事件在 CSS 动画结束播放时触发
    animationiteration 该事件在 CSS 动画重复播放时触发
    animationstart 该事件在 CSS 动画开始播放时触发
    过渡事件
    transitionend 该事件在 CSS 完成过渡后触发。
    其他事件
    onmessage 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
    onmousewheel 已废弃。 使用 onwheel 事件替代
    ononline 该事件在浏览器开始在线工作时触发。
    onoffline 该事件在浏览器开始离线工作时触发。
    onpopstate 该事件在窗口的浏览历史(history 对象)发生改变时触发。
    onshow 该事件当 <menu> 元素在上下文菜单显示时触发
    onstorage 该事件在 Web Storage(HTML 5 Web 存储)更新时触发
    ontoggle 该事件在用户打开或关闭 <details> 元素时触发
    onwheel 该事件在鼠标滚轮在元素上下滚动时触发
    事件对象
    常量
    CAPTURING-PHASE 当前事件阶段为捕获阶段(1)
    AT-TARGET 当前事件是目标阶段,在评估目标事件(1)
    BUBBLING-PHASE 当前的事件为冒泡阶段 (3)
    属性
    bubbles 返回布尔值,指示事件是否是起泡事件类型。
    cancelable 返回布尔值,指示事件是否可拥可取消的默认动作。
    currentTarget 返回其事件监听器触发该事件的元素。
    eventPhase 返回事件传播的当前阶段。
    target 返回触发此事件的元素(事件的目标节点)。
    timeStamp 返回事件生成的日期和时间。
    type 返回当前 Event 对象表示的事件的名称。
    方法
    initEvent() 初始化新创建的 Event 对象的属性。
    preventDefault() 通知浏览器不要执行与事件关联的默认动作。
    stopPropagation() 不再派发事件。
    目标事件对象
    方法
    addEventListener() 允许在目标事件中注册监听事件(IE8 = attachEvent())
    dispatchEvent() 允许发送事件到监听器上 (IE8 = fireEvent())
    removeEventListener() 运行一次注册在事件目标上的监听事件(IE8 = detachEvent())
    事件监听对象
    方法
    handleEvent() 把任意对象注册为事件处理程序
    鼠标/键盘事件对象
    属性
    altKey 返回当事件被触发时,"ALT" 是否被按下。 2
    button 返回当事件被触发时,哪个鼠标按钮被点击。 2
    clientX 返回当事件被触发时,鼠标指针的水平坐标。 2
    clientY 返回当事件被触发时,鼠标指针的垂直坐标。 2
    ctrlKey 返回当事件被触发时,"CTRL" 键是否被按下。 2
    Location 返回按键在设备上的位置 3
    charCode 返回onkeypress事件触发键值的字母代码。 2
    key 在按下按键时返回按键的标识符。 3
    keyCode 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
    which 返回onkeypress事件触发的键的值的字符代码,或者 onkeydown 或 onkeyup 事件的键的代码。 2
    metaKey 返回当事件被触发时,"meta" 键是否被按下。 2
    relatedTarget 返回与事件的目标节点相关的节点。 2
    screenX 返回当某个事件被触发时,鼠标指针的水平坐标。 2
    screenY 返回当某个事件被触发时,鼠标指针的垂直坐标。 2
    shiftKey 返回当事件被触发时,"SHIFT" 键是否被按下。 2

    2.JavaScript 可以做什么?

    通过使用 JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

    事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:

    • 页面加载时触发事件
    • 页面关闭时触发事件
    • 用户点击按钮执行动作
    • 验证用户输入内容的合法性
    • 等等 ...

    可以使用多种方法来执行 JavaScript 事件代码:

    • HTML 事件属性可以直接执行 JavaScript 代码
    • HTML 事件属性可以调用 JavaScript 函数
    • 你可以为 HTML 元素指定自己的事件处理程序
    • 你可以阻止事件的发生。
    • 等等 ...

     

     

    转载于:https://my.oschina.net/wangzhijie/blog/886707

    展开全文
  • JavaScript 事件

    2013-12-30 14:47:00
    以下是一些常见的 JavaScript 事件举例: 页面内容被浏览器载入 用户点击一个按钮 用户按下某个按键 事件通常和 JavaScript 函数一起配合使用,即以事件驱动函数,来完成我们希望的某些功能。 ...

    网页中能被 JavaScript 侦测到的行为称为 JavaScript 事件。以下是一些常见的 JavaScript 事件举例:

    1. 页面内容被浏览器载入

    2. 用户点击一个按钮

    3. 用户按下某个按键

    事件通常和 JavaScript 函数一起配合使用,即以事件驱动函数,来完成我们希望的某些功能。

    常用 JavaScript 事件列表

    以下是常用的 JavaScript 事件列表,点击对应链接可查看每个事件具体的用法示例:

    一般事件

    事件属性触发该事件的条件
    onclick 事件 鼠标点击某个对象
    ondblclick 事件 鼠标双击某个对象
    onmousedown 事件 按下鼠标键
    onmouseup 事件 鼠标键按下后松开
    onmouseover 事件 鼠标移动到某对象范围的上方
    onmouseout 事件 鼠标离开某对象范围
    onkeydown 事件 键盘上某个按键被按下
    onkeypress 事件 键盘上某个键被按下或按住
    onkeyup 事件 键盘上某个键(按下后)被松开

    表单相关事件

    事件属性触发该事件的条件
    onblur 事件 元素失去焦点
    onfocus 事件 元素获得焦点
    onchange 事件 用户改变表单域的内容
    onsubmit 事件 表单提交按钮被点击
    onreset 事件 表单重置按钮被点击

    页面相关事件

    事件属性触发该事件的条件
    onload 事件 页面或图像(被浏览器)加载完成
    onunload 事件 用户退出页面(或页面改变为其他页面)
    onerror 事件 当加载文档或图像时发生某个错误
    onresize 事件 窗口或框架被调整尺寸
    onmove 事件 窗口或框架被移动
    onscroll 事件 浏览器的滚动条位置发生变化
    onstop 事件 浏览器的停止按钮被按下或者正在下载的文件被中断

    编辑事件

    事件属性触发该事件的条件
    onselect 事件 当文本内容被选择
    onbeforecopy 事件 当页面被选择内容将要复制到系统剪贴板前
    oncopy 事件 当前被选择的内容被复制后
    oncut 事件 当前被选择的内容被剪切
    onpaste 事件 当内容被粘贴时
     

    转载于:https://www.cnblogs.com/baixc/p/3497752.html

    展开全文
  • javascript的常见事件

    2019-12-29 21:32:42
    javascript的常见事件 (a) 窗口事件,只在body和frameset元素中才有效 1、onload,页面或者图片加载完成时 2、onunload,用户离开页面时候 (b) 表单元素事件,在表单元素中才有效 1、onchange,框内元素改变时...
  • 这是托更的一篇关于JavaScript事件的一篇博客!!! 直接进入正题 JavaScript中常见的事件有 onclick 事件、onload 事件、 onblur 事件、onmouseover 事件、onmouseout 事件 onmousemove 事件看到这是不是小白可能懵...
  • JavaScript常见事件

    2019-03-21 21:22:15
    onload 事件可用于检测访问者浏览器类型和浏览器版本,并基于这些信息来加载网页正确版本。 onload 和 onunload 事件可用于处理 cookie。 onchange 事件 onchange 事件常结合对输入字段验证来使用。如:当...
  • Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文:https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9649804010964222368%22%7D&n_...
  • 我们在使用onmouseout事件的时候,经常会出现诡异现象,达不到自己预期效果! 比如以下示例: 图01 图02 当鼠标点击"列表"域时如图01,显示所有列表如图02,鼠标离开所有列表域时,又返回图01...
  • JavaScript常见的事件

    千次阅读 2018-09-16 10:37:11
    1.onclick() 鼠标左键单击事件 2.onmouseover 鼠标进入事件 3.onmouseout 鼠标离开事件 4.onfocus 获取焦点事件 5.onblur 失去焦点事件 6.onmousemove 鼠标移动事件 7.onscroll 滚动条滚动事件 8. ...
  • javascript常见事件

    2019-11-29 20:54:29
    ** javascript中常见事件 事件监听机制: 概念:某些组件被执行了某些操作后,触发某些代码的执行。 ...事件:某些操作。如: 单击,双击,键盘按下...常见的事件: 点击事件: onclick:单击事件 ondbl...
  • javaScript常见的事件

    千次阅读 2013-05-11 09:57:14
    今天刚刚阅读javaScript常见的事件做一个笔记。 常用事件: 1.onclick鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons...
  • 概念:某些组件被执行了某些操作后,触发...常见的事件: 1. 点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 2. 焦点事件 1. onblur:失去焦点 2. onfocus:元素获得焦点。 3. 加载事件: 1.
  • 事件* 常见的事件:演示 * 常见的事件: 点击事件: 1. onclick:单击事件 2. ondblclick:双击事件 焦点事件 1. onblur:失去焦点 2. onfocus:元素获得焦点。 加载事件: 1. onload:一张页面或一幅图像完成加载。...
  • 主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下
  • 主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要朋友可以参考下
  • 加载事件: 1. onload:一张页面或一幅图像完成加载。 4. 鼠标事件: 1. onmousedown 鼠标按钮被按下。 2. onmouseup 鼠标按键被松开。 3. onmousemove 鼠标被移动。 4. onmouseover 鼠标移到某元素之上。 5...
  • HTML DOM 允许 JavaScript 对 HTML 事件作出反应,即当事件发生时,可以执行 JavaScript。 HTML 事件的例子: 当用户点击鼠标时,onclick当网页已加载时,当图片已加载时,当鼠标移动到元素上时,当输入字段被...
  • 主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要朋友可以参考下
  • JavaScript常见的事件函数

    千次阅读 2018-09-18 22:17:23
    js的事件在实际项目中是用非常多,今天,总结一下基本并且常用的事件函数: 1. 鼠标事件:  onclick: 点击事件  ondblclick: 双击事件    onmouseover: 鼠标进入“某对象区域”  onmouseout: 鼠标离开“某...
  • Javascript事件绑定常见方案详解

    万次阅读 2019-04-27 11:47:55
    常见的三种绑定方式 (1)在DOM元素上直接绑定事件 (2)在js标签(实现分离)中绑定事件 (3)通过DOM lev3级事件绑定标准(事件监听)绑定事件 第一种绑定方式(DOM元素上直接绑定) <button onclick=...
  • 常见的HTML事件 事件 描述 onchange HTML 元素改变 onclick 用户点击 HTML 元素 onmouseover 用户在一个HTML元素上移动鼠标 onmouseout 用户从一个HTML元素上移开鼠标 onkeydown 用户按下键盘按键 ...
  • JavaScript常见事件类型

    千次阅读 2018-08-09 14:15:38
    UI (User Interface) 事件,当用户与页面上元素交互时触发 Load事件:当页面完全加载后,就会触发window上load事件。 Unload事件:在文档被完全卸载后触发。只要用户从一个页面切换到另一个页面,就会触发。 ...
  • BOM操作的常见事件 1、点击事件clcik onclcik绑定点击 标签ID.onclick = function(){ 程序; } 示例1、 d1.onclick = function(){ console.log('我是div,有人点我'); } 示例2、 function fun(){ co...
  • 主要介绍了JavaScript常见事件对象与操作,结合实例形式总结分析了javascript针对DOM、IE及跨浏览器事件对象相关操作技巧,需要朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,361
精华内容 544
关键字:

常见的javascript事件

java 订阅