zoukankan      html  css  js  c++  java
  • JS 事件对象

    一. 什么是事件对象? (黑匣子)
    事件:
    onclick
    ondblclick
    onmousedown
    onmouseup
    onmouseenter
    onmouseleave
    onmouseover
    onmouseout
    onmousemove
    onkeydown
    onkeyup
    onkeypress
    onload
    onunload : 关闭页面时,

    onfocus
    onblur
    onchange
    onsubmit : 提交时触发,

    onscroll
    onresize

    对象.事件 = function(){}

    当绑定对象的事件被触发时,所发生的所有详细信息都会保存在一个地方,这个地方称为事件对象.
    二. 如何获取事件对象?
    标准浏览器 : 给事件触发函数传递的第一个参数,
    IE浏览器 : 全局对象的属性window.event,
    兼容:
    evt = evt || window.event;
    var e = evt || window.event;
    三. 如何获取鼠标的编码值?
    event.button
    标准浏览器 : 左键: 0 滚轮键 : 1 右键 : 2,
    IE9以下: 1 4 2,
    兼容:
    function getButton(evt){
    var e = evt || window.event;
    if(evt){
    return e.button;
    }else if(window.event){
    switch(e.button){
    case 1 : return 0;
    case 4 : return 1;
    case 2 : return 2;
    }
    }
    }
    四. 如何获取鼠标的坐标值?
    1. 相对坐标值 : event.offsetX event.offsetY, 相对鼠标所在对象上的坐标值
    2. 绝对坐标值(页面坐标值) : event.pageX event.pageY, 鼠标到页面的坐标值
    3. 可视区坐标值 : event.clientX event.clientY, 鼠标到页面中可视区域的坐标值
    4. 屏幕坐标值 : event.screenX event.screenY 鼠标到电脑屏幕的坐标值,

    如何实现鼠标跟随效果?
    五. 什么是事件流?什么是事件冒泡?
    事件流:指事件的流向,有三个阶段:事件捕获/事件目标/事件冒泡.,
    事件捕获: 由外向内,由祖先元素向子孙元素依次传递事件的过程.,
    事件冒泡: 由内向外,由子孙元素向祖先元素依次传递事件的过程,

    注: 浏览器默认开启的是事件冒泡,IE与欧朋浏览器不支持事件捕获.
    如何阻止事件冒泡?
    标准浏览器 : event.stopPropagation()
    IE: event.cancelBubble = true;
    兼容:
    event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
    六. 如何获取键盘的编码值?
    event.keyCode event.charCode event.which
    onkeydown/onkeyup : 监听是整个键盘.
    event.keyCode : 获取整个键盘的编码值,字母只获取大写的编码值.,

    onkeypress : 监听除功能键外的键盘值
    兼容 : event.keyCode || event.charCode || event.which
    火狐:
    event.keyCode : 0,
    event.charCode : 大小写字母的编码值,
    event.which : 大小写字母的编码值,
    谷歌:
    event.keyCode : 大小写字母的编码值,
    event.charCode : 大小写字母的编码值,
    event.which : 大小写字母的编码值,
    七. 如何设置组合键(快捷键)
    event.ctrlKey
    event.shiftKey
    event.altKey

  • 相关阅读:
    2020重新出发,MySql基础,MySql用户管理
    2020重新出发,MySql基础,MySql字符集
    2020重新出发,MySql基础,MySql事务
    python全栈day10
    python全栈day9
    python全栈day8
    python全栈day7
    python全栈day6
    python全栈day5
    python全栈day4
  • 原文地址:https://www.cnblogs.com/pppoe/p/10396205.html
Copyright © 2011-2022 走看看