事件基础

彩虹海 2020-09-02 PM 232℃ 2条

事件基础

事件三要素:事件源 事件类型 事件处理程序。

<body>
    <button id = 'btn'>大河之剑</button>
    <script>
        // 点击一个按钮,弹出对话框
        // 1.事件有三部分组成  事件源  事件类型 事件处理程序  我们也称为事件三要素
        // (1) 事件源  事件被触发的对象  谁? 按钮
        var inc = document.getElementsByTagName('div')
        // (2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
        // (3) 事件处理程序 通过一个函数赋值的方法 完成
        inc.onclick = function() {
            alert('天上来');
        }
    </script>
</body>

执行事件的步骤:

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(采取函数赋值形式)
<body>
    <div>绳绳兮不可为,复归于无物</div>
    <script>
        //执行事件步骤
        // 1.点击div 控制台输出 我被选中了
       var bln = document.querySelector('div');
        // 2.绑定事件 注册事件
        // bln.ocnlick 
        // 3.添加事件处理程序
       bln.onclick = function() {
           console.log('我被选中了');
       }
    </script>
</body>

常见的鼠标事件

鼠标事件触发条件
onclick鼠标点击左键触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发
标签: JS

非特殊说明,本博所有文章均为博主原创。

评论啦~



已有 2 条评论


  1. Ajiang
    Ajiang

    普高天天上课,好累啊,

    回复 2020-09-20 12:38
    1. 彩虹海
      彩虹海 博主

      那能咋办

      回复 2020-09-20 14:07