事件

事件介绍

什么是事件? js属于事件驱动编程,把'驱动'执行,调用

通过一些交互,触发一些函数

日常生活中事件: 发生并得到处理的操作(即事情来了, 然后处理)

在JS中的事件是: 用户在页面上操作, 然后我们要调用函数来处理.

比如:

1, 点击了登录按钮, 调用登录函数执行登录操作 2, 鼠标拖拽, 调用函数实现拖拽

用户在页面上操作(如点击按钮, 鼠标滑过, 鼠标点击, 鼠标松开, 文本框获得焦点, 失去焦点等), 就是事件触发.

事件模式的分类

JavaScript的两种事件实现模式:内联模式,脚本模式

内联模式

内联模式 : 直接在HTML标签中添加事件. 这种模型是最传统简单的一种处理事件的方法。但是这种模式中事件和HTML是混写的, 并没有将JS与HTML分离, 当代码量多了以后,对后期代码维护和扩展很不利.

例如: 
<input type="button" value="按钮" onclick="alert('hello');" /> 
注意: 单双引号

执行自定义的JS函数 
<input type="button"value="按钮" onclick="btnClick();" /> 

注意: 内联模式调用的函数不能放到window.onload里面, 否则会找不到该函数.

脚本模式

脚本模式: 脚本模式能将JS代码和HTML代码分离, 符合代码规范. 使用脚本模式我们需要先获取到元素节点对象, 再针对该节点对象添加事件

例如: 
var box = document.getElementById('box'); 
添加事件方式一 :  通过匿名函数，可以直接触发对应的代码 (推荐)
box.onclick = function() {  //给box节点对象添加点击事件onclick
         console.log('Hello world!'); 
};

添加事件方式二 :  通过指定的函数名赋值的方式 来执行函数
box.onclick = func;    //注意这里不能写成func()
function func() {        //给box节点对象添加点击事件onclick
         console.log('Hello world!'); 
};

事件处理的组成

触发事件的元素节点对象
事件处理函数
事件执行函数

document.onclick = function(){ 
    console.log('单击了文档页面的某一个地方'); 
};

在上面的程序中：
document : 是触发事件的对象, 表示触发事件的元素所在区域;
onclick : 表示一个事件处理函数(on+事件类型click)
function(){} : 匿名函数是被执行的函数, 用于触发事件后执行;
注意: 事件处理函数一般都是小写字母

事件的分类

鼠标事件

鼠标事件，页面所有元素都可触发鼠标事件;

click：当单击鼠标按钮并在松开时触发

onclick = function() {
        console.log('单击了鼠标'); 
};

dblclick：当双击鼠标按钮时触发。

ondblclick = function() {
        console.log('双击了鼠标'); 
};

mousedown：当按下了鼠标还未松开时触发。

onmousedown = function() {
        console.log('按下鼠标'); 
};

mouseup：释放鼠标按钮时触发。

onmouseup = function() {
        console.log('松开了鼠标'); 
};

mouseover：当鼠标移入某个元素的那一刻触发。

onmouseover = function() {
        console.log('鼠标移入了'); 
};

mouseout：当鼠标刚移出某个元素的那一刻触发。

onmouseout = function() {
        console.log('鼠标移出了'); 
};

mouseenter：当鼠标移入某个元素的那一刻触发。

onmouseenter = function() {
        console.log('鼠标移入了'); 
};

mouseleave：当鼠标刚移出某个元素的那一刻触发。

onmouseleave = function() {
        console.log('鼠标移出了'); 
};

mousemove：当鼠标指针在某个元素上移动时触发。

onmousemove = function() {
        console.log('鼠标移动了'); 
};

mouseover 与 mouseout 和 mouseenter 与 mouseleave的区别是:
mouseover: 元素的子元素移入也会触发事件
mouseenter : 元素的子元素移入不会触发事件
mouseout 和 mouseleave 同理

键盘事件

键盘事件，在键盘上按下键时触发的事件(一般由window对象或者document对象调用)

keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。

window.onkeydown = function() {
        console.log(按下了键盘上的某个键); 
};

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

window.onkeypress = function() { 
        console.log('按下了键盘上的字符键'); 
};

keyup：当用户释放键盘上的某个键触发。

window.onkeyup = function() {
        console.log(松开键盘上的某个键); 
};

html事件

HTML事件，跟HTML页面相关的事件;

load：当页面完全加载后触发

dom结构加载完成,并且全部外部资源也加载完成后,才触发
凡是带有src属性的标签,都有onload事件

window.onload = function() { 
        console.log('页面已经加载完毕'); 
};

unload：当页面完全卸载后触发

页面刷新或是卸载完全后触发

window.onunload = function() { 
        console.log('页面已经卸载完毕'); 
};

DOMContentLoaded dom结构加载完成后就立即触发

select：当用户选择文本框(input 或 textarea)中的内容触发。

input.onselect = function() { 
        console.log('选择了文本框中的内容'); 
};

change：当文本框(input 或 textarea)内容改变且失去焦点后触发。

input.onchange = function() { 
        console.log('文本框中内容改变了'); 
};

focus：当页面或者元素获得焦点时触发。

input.onfocus = function() { 
        console.log('文本框获得焦点'); 
};

blur：当页面或元素失去焦点时触发。

input.onblur = function() { 
        console.log('文本框失去焦点'); 
};

submit：当用户点击提交按钮在元素节点上触发。

form.onsubmit = function() { 
        console.log(‘提交form表单’);  
};

reset：当用户点击重置按钮在元素节点上触发。

form.onreset = function() { 
        console.log('重置form表单'); 
};

scroll：当用户滚动带滚动条的元素时触发。

window.onscroll= function() { 
        console.log('滚动了滚动条了'); 
};

表单

   <body>
    <!-- 表单 -->
    <form action="">
        <p>
            <!-- 表单元素 -->
            用户名:<input type="text" name="username">
        </p>
        <p>
            密码: <input type="text" name="passwword">
        </p>
        <p>
            <!-- 点击提交按钮,表单会产生默认的提交行为 -->
            <!-- 如果写button,不给类型的情况下,在表单里默认是 提交 submit -->
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </p>

    </form>

    <script>
        // 获取表单对象
        var oForm  = document.forms[0];//一个页面中可以有多个表单
        // 给''表单对象',绑定提交行为, 不是按钮绑定提交或点击

        //重点
        oForm.onsubmit = function(){
            //1.会触发js onsubmit事件
            console.log("提交")
            return false;//阻止表单的默认行为,不让表单提交
            //2.会触发html的表单提交行为
        }

        //了解一下
        oForm.onreset = function(){
          //  return false;//重置禁用
          return true;//可用
        }

    </script>
</body>

事件对象Event

事件对象Event是什么?

event对象是在触发事件时, 浏览器会通过函数把事件对象作为参数传递过来, 在事件触发执行函数时一般会得到一个隐藏的参数, 该参数也是放在arguments数组中

事件对象的兼容写法

box.onclick = function(evt){
    var e = evt || window.event  
    // window.event  ie6+
    // evt    google  重点掌握它
}

事件对象的属性

e.button 0左键 1滚轮键 2右键
e.type 事件的类型
e.charCode 按键的字符编码
e.keyCode 按键编码
e.key 按键的值
e.altKey 是否按下alt键
e.ctrlKey 是否按下ctrl键
e.shiftKey 是否按下shift键
e.metaKey 是否按下win键
e.clientX,e.clientY 鼠标点击的点,到浏览器左上角的距离
e.pageX,e.pageY 鼠标点击的点,到页面左上角的距离
e.offsetX,e.offsetY 鼠标点击的点,到当前元素左上角的距离
e.screenX,e.screenY 鼠标点击的点,到屏幕左上角的距离
e.target 鼠标点击的目标元素,不一定等于this
e.preventDefault() 阻止默认行为
e.returnValue = false;
e.stopPropagation() 停止冒泡
e.cancelBubble = true;

事件(上)

事件

事件介绍

事件模式的分类

内联模式

脚本模式

事件处理的组成

事件的分类

鼠标事件

click： 当单击鼠标按钮并在松开时触发

dblclick： 当双击鼠标按钮时触发。

mousedown：当按下了鼠标还未松开时触发。

mouseup： 释放鼠标按钮时触发。

mouseover：当鼠标移入某个元素的那一刻触发。

mouseout：当鼠标刚移出某个元素的那一刻触发。

mouseenter：当鼠标移入某个元素的那一刻触发。

mouseleave：当鼠标刚移出某个元素的那一刻触发。

mousemove：当鼠标指针在某个元素上移动时触发。

键盘事件

keydown：当用户按下键盘上某个键触发，如果按住不放，会重复触发。

keypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

keyup：当用户释放键盘上的某个键触发。

html事件

load：当页面完全加载后触发

unload：当页面完全卸载后触发

DOMContentLoaded dom结构加载完成后就立即触发

select：当用户选择文本框(input 或 textarea)中的内容触发。

change：当文本框(input 或 textarea)内容改变且失去焦点后触发。

focus：当页面或者元素获得焦点时触发。

blur：当页面或元素失去焦点时触发。

submit：当用户点击提交按钮在元素节点上触发。

reset：当用户点击重置按钮在元素节点上触发。

scroll：当用户滚动带滚动条的元素时触发。

事件对象Event

事件对象Event是什么?

事件对象的兼容写法

事件对象的属性

click：当单击鼠标按钮并在松开时触发

dblclick：当双击鼠标按钮时触发。

mouseup：释放鼠标按钮时触发。