博客

事件

什么是事件？

事件是有两个部分组成

1、事件发生了

2、针对于这个事件，做出处理。

      事件处理的行为一定是实现约定好的。
      【注】这个约定的方式叫做 事件绑定。
      
事件绑定的两种方式
      1、内联
      2、外联/脚本模式 【注】一般情况下选择第二种。

绑定事件

function btnClick() {
        alert("我是内联模式");
      }
    
    window.onload = function () {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function () {
          alert("外联模式");
        };
      };

事件类型：

鼠标事件类型：（可以绑定在任何元素节点上）

          click       单击
          dblclick    双击
          mousedown   鼠标按下
          mouseup     鼠标抬起
          mouseover   鼠标移入
          mouseout    鼠标移出
          mousemove   鼠标移动  不停的触发（只要相对移动了）
          mouseenter  鼠标移入
          mouseleave  鼠标移出

事件绑定的格式：
        元素节点.on + 事件类型 = 函数;

        click  是事件类型
        onclick是事件处理函数

键盘事件

绑定在：window或者输入框
        keydown   键盘按下（如果按住不放，不停的重复触发）
        keyup     键盘抬起

        keypress  键盘按下（只支持字符键）

html事件

window事件

  load     当页面加载完成的时候，触发
  unload   当页面解构的时候触发，（刷新、关闭）IE支持
  scroll   当页面发生滚动的时候触发
  resize   当页面窗口大小发生变化的时候触发

2、表单事件

    blur   失去焦点
	focus  获取焦点
	select 当我们在输入框内选中文本的时候触发
	input  当在输入框输入的时候触发（输入包括删除）
	change 当我们对输入框的文本进行修改并且失去焦点的时候
	submit 当我们点击submit上的按钮才能触发
	reset  当我们点击reset上的按钮才能触发
	【注】必须添加在form元素上

事件对象

西红柿+鸡蛋+调料 = 菜。

    格式：
    元素节点.on + 事件类型 = 函数;
    【注】事件绑定一成立。系统就会根据这次事件绑定，生成一个新的对象，
    新的对象叫做事件对象。
      系统在用户触发事件以后，会主动调用事件处理函数，然后将事件对象，当做第一个参数传入。

button的属性

0 左键
1 滚轮
2 右键

获取当前鼠标位置：(原点位置不一样)

clientX  clientY  原点位置：可视窗口的左上角为原点
pageX    pageY    原点位置：整个页面的左上角(包含滚出去的滚动距离)
screenX  screenY  原点位置：电脑屏幕的左上角
offsetX  offsetY 原点位置：被按下的元素节点的左上角

事件对象的属性（修改键）

    shiftKey  如果按下shift键，这个值就为true，否则为false
      ctrlKey
      altKey
      metaKey   windows电脑，windows键，mac电脑 command

键码

键码：keyCode
    只有keydown支持，返回当前按下的键对应的ASCII码值，统一返回大写字母的ASCII码值。
    【注】我们可以通过键码区分当前按下的是哪个键。

    which

    获取键码：var which = e.keyCode || e.which;

字符码

字符码：charCode
    只有keypress支持，返回当前按下键的对应ASCII码值，区分大小写的。

    获取字符码：var which = e.charCode || e.which;

事件冒泡

事件冒泡：事件由里向外逐级触发。
事件捕获：事件由外向里逐级触发。

想办法阻止事件冒泡：
        cancelBubble=true
        stopPropagation()