js之事件">JS之事件

事件名称">事件名称

js xml">鼠标事件一般加给div 
键盘事件一般加给document 输入框
提交与重置事件是加给整个form表单
js-tag"><js-title">head>
    js-tag"><js-title">style js-attribute">type=js-value">"text/css">
        js-class">.redDivjs-rules">{
            js-rule">js-attribute">width:js-value">js-number">200px;
            js-rule">js-attribute">height:js-value">js-number">200px;
            js-rule">js-attribute">background-color:js-value">red;
        js-rule">}
        js-tag">bodyjs-rules">{
        js-rule">// 为了出现纵向滚动条
            js-attribute">height:js-value">js-number">3000px;
        js-rule">}
    js-tag"></js-title">style>
js-tag"></js-title">head>
js-tag"><js-title">body>
    js-tag"><js-title">div js-attribute">class=js-value">"redDiv">js-tag"></js-title">div>
    js-tag"><js-title">form js-attribute">action=js-value">"" js-attribute">id=js-value">"uName">
        js-tag"><js-title">input js-attribute">type=js-value">"text" js-attribute">id=js-value">"uName" />  // 创建文本框
        js-tag"><js-title">input js-attribute">type=js-value">"submit" js-attribute">id=js-value">"submit" />  // 创建提交按钮
        js-tag"><js-title">input js-attribute">type=js-value">"reset" js-attribute">id=js-value">"reset" />  // 设置重置按钮
    js-tag"></js-title">form>
js-tag"></js-title">body>
js-tag"><js-title">script js-attribute">type=js-value">"text/javascript">
    js-keyword">var redDiv = document.getElementsByClassName(js-string">'redDiv')[js-number">0];
    js-keyword">var reg = document.getElementById(js-string">'reg');
    js-keyword">var uName = document.getElementById(js-string">'uName');

    js-comment">// 鼠标事件
    redDiv.onmousemove = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"鼠标移动的时候触发");
    }
    redDiv.onclick = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"单击事件");
    }
    redDiv.ondblclick = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"双击事件");
    }
    redDiv.onmousedown = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"鼠标按下事件");
    }
    redDiv.onmouseup = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"鼠标抬起事件");
    }
    redDiv.oncontextmenu = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"鼠标右击事件");
        js-comment">// 不添加返回值,右击时会出现菜单栏
        js-comment">// 添加这个返回值,右击时菜单栏不会再出现
        js-keyword">return js-literal">false;
    }

    js-comment">// over和out会在鼠标从redDiv的父级移到子集的时候触发,先触发out,再触发over
    js-comment">// leave和enter从redDiv(父级)移到blueDiv(子集)的时候不会触发
    js-comment">// 只有鼠标离开/移入整个redDiv的时候才会触发
    redDiv.onmouseover = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"over鼠标移入");
    }
    redDiv.onmouseout = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"out鼠标移出");
    }
    redDiv.onmouseenter = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"enter鼠标移入");
    }
    redDiv.onmouseleave = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"leave鼠标移出");
    }

    js-comment">// 键盘事件
    document.onkeydown = js-function">js-keyword">functionjs-params">(){
    js-comment">// 按下任意键时触发
        console.log(js-string">"down键盘按下");
    }
    document.onkeypress = js-function">js-keyword">functionjs-params">(){
    js-comment">// 按下任意键触发
        console.log(js-string">"press键盘按下");
    }
    js-comment">// press与down的区别
    js-comment">// press区分大小写,但不支持特殊键
    js-comment">// dowm 不区分大小写,但支持特殊键
    document.onkeyup = js-function">js-keyword">functionjs-params">(){
    js-comment">// 松开键时触发
        console.log(js-string">"键盘拾起事件");
    }

    js-comment">// 表单事件
    uName.oninput = js-function">js-keyword">functionjs-params">(){
        console.log(input内容发生改变后触发);
    }
    uName.onchange = js-function">js-keyword">functionjs-params">(){
        console.log(change内容发生改变后触发);
    }
    js-comment">// text框中,移入一个英语单词,每当输入一个字母时,就会触发oninput事件
    js-comment">// 当输入完毕,离开文本框时,会触发onchange事件
    uName.onfocus = js-function">js-keyword">functionjs-params">(){
    js-comment">// 点击text文本框时触发
        console.log(js-string">"聚焦");
    }
    js-comment">// 再点击其他地方时,触发onblur事件
    uName.onblur = js-function">js-keyword">functionjs-params">("失焦");

    // 给js-title">form表单绑定事件
    js-title">reg.js-title">onsubmit = js-title">functionjs-params">(){
        console.log(js-string">"提交");
        js-comment">// 没有return false的时候,点击提交按钮会刷新页面
        js-comment">// 有return false的时候,点击提交按钮不会刷新页面
        js-keyword">return js-literal">false;
    }
    reg.onreset = js-function">js-keyword">functionjs-params">(){
    js-comment">// 没有return false的时候,可以重置text框体内容
    js-comment">// 有return false的时候,重置将会失败
        console.log(js-string">"重置");
        js-keyword">return js-literal">false;
    }

    js-comment">// window事件
    window.onresize = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"窗口尺寸发生变化的时候触发");
    }
    window.onscroll = js-function">js-keyword">functionjs-params">(){
    js-comment">// 前提是要有滚动条
        console.log(js-string">"窗口内容滚动的时候触发");
    }
    js-comment">// 图片加载完成后 会触发这个方法
    img.onload = js-function">js-keyword">functionjs-params">(){

    }
    js-comment">// 窗口加载完毕后,会触发这个方法
    window.onload = js-function">js-keyword">functionjs-params">(){
        console.log(js-string">"窗口加载完毕后触发");
    }
js-tag"></js-title">script>

事件对象">事件对象

js xml">js-tag"><js-title">head>
    js-tag"><js-title">meta js-attribute">charset = "js-attribute">utd-8" />
    js-tag"><js-title">title>事件对象js-tag"></js-title">title>
    js-tag"><js-title">style js-attribute">type=js-value">"text/css">
        js-class">.bodyjs-rules">{
            js-rule">js-attribute">height:js-value">js-number">3000px;
        js-rule">}
        js-class">.redDivjs-rules">{
            js-rule">js-attribute">width:js-value">js-number">200px;
            js-rule">js-attribute">height:js-value">js-number">200px;
        js-rule">}
        js-tag">pjs-rules">{
            js-rule">js-attribute">margin:js-value">js-number">0px;
            js-rule">js-attribute">height:js-value">js-number">100px;
            js-rule">js-attribute">margin-left:js-value">js-number">100px;
            js-rule">js-attribute">background-color:js-value">blue;
        js-rule">}
    js-tag"></js-title">style>
js-tag"></js-title">head>
js-tag"><js-title">body>
    js-tag"><js-title">div js-attribute">class = "js-attribute">redDiv">
        js-tag"><js-title">p>js-tag"></js-title">p>
    js-tag"></js-title">div>
js-tag"></js-title">body>
js-tag"><js-title">script js-attribute">text=js-value">"text/javascript">
    js-keyword">var dic = document.getElementsByClassName(js-string">'redDiv')[js-number">0];
js-comment">/*
为什么JS事件函数里面都有一个参数(ev)?
因为ev是事件的参数,在ev里面包含了事件触发时的参数,比如click事件中的ev中包含着e.pageX,e.pageY,keyDown事件中
包含着ev.keyCode等,在ie中,ev是全局的,可以通过window.event来获取,在其他浏览器中都是作为参数传入的.
所以好多事件函数都这样写:
mydiv.onclick = function(ev){
    if(!ev){
        ev = window.event; // 这句话也可以简写成:ev = window.event || ev;
    }
}
这么写为了兼容各个浏览器
在火狐浏览器中,事件绑定的函数要获取到事件本身,需要从函数中传入,而IE等浏览器则可以直接使用event或者window.event得到事件本身.
这一句话的用途:需要获取和事件相关的信息时使用
*/
    redDiv.onclick = js-function">js-keyword">functionjs-params">(ev){
        evObj = window.event || ev;
        js-comment">// 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
        js-comment">// 各元素之间有关联的时候,触发一个事件,可能会影响到另外一个事件的触发
        console.log(evObj.target);
        js-comment">// 鼠标距离窗口顶部的坐标 p标签本身有一个marginTop
        console.log(evObj.clientY);
        js-comment">// 鼠标距离页面顶部的坐标
        console.log(evObj.pageY);
        js-comment">// 鼠标举例target顶部的坐标
        console.log(evObj.offsetY);
    }
    document.onkeypress = js-function">js-keyword">functionjs-params">(ev){
    js-comment">// keyCode标示按哪一个按键
        console.log(js-string">"press" + ev.keyCode);
    }
    document.onkeydown = js-function">js-keyword">functionjs-params">(ev){
        console.log(ev.keyCode);
        js-keyword">if(ev.keyCode == js-number">66){
            console.log(js-string">"按了B");
        }
        js-comment">// ev.metaKey
        js-keyword">if(ev.keyCode == js-number">66 && ev.metaKey){
            console.log(js-string">"按了command+b");
        }
    }
js-tag"></js-title">script>