Javascript:DOM事件(监听鼠标点击/释放,鼠标悬停/离开等)

使用Javascript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等。

代码整理自w3school:http://www.w3school.com.cn

效果图:

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />

<title>Javascript 事件</title>

<head>
  <style type="text/css">
    body {background-color:#eeeeee}
    div.greenBtn
    {
      color:white;
      background-color:green;
      width:200px;
      height:20px;
      text-align:center;
      padding-top:20px;
      padding-bottom:20px;
    }
    button.greenBtn
    {
      color:white;
      background-color:green;
      width:200px;
      height:50px;
      text-align:center;
      border:0px;
    }
  </style>
</head>

<body onload="checkCookies()">  <!--页面加载时检测浏览器cookies是否启用-->
  <h3>(一)点击时改变HTML元素内容</h3>
  <h4>1.直接改变</h4>
  <p onclick="this.innerHTML = '谢谢'">请点击文字</p>
  <h4>2.通过函数改变</h4>
  <p onclick="changeText(this)">请点击文字</p>
  <script>
    function changeText(ele){
      ele.innerHTML = "谢谢";
    }
  </script>

  <script>
  function checkCookies(){
    if (navigator.cookieEnabled){
      // alert("已启用 cookie")
    }else{
      // alert("未启用 cookie")
    }
  }
  </script>

  <h3>(二)onload 和 onunload 事件</h3>
  <p>
    onload 和 onunload 事件会在用户进入或离开页面时被触发。<br>
    onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。<br>
    onload 和 onunload 事件可用于处理 cookie
  </p>

  <h3>(三)onchange事件</h3>
  <p>请输入英文字符:<input type="text" onchange="toUpper(this)">
  <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
  <script>
    function toUpper(ele){
      ele.value = ele.value.toUpperCase();
    }
  </script>

  <h3>(四)onmouseover 和 onmouseout 事件</h3>
  <div class="greenBtn" onmouseover="mOver(this)" onmouseout="mOut(this)">
    把鼠标放在上面
  </div>
  <script>
    function mOver(ele){
      ele.innerHTML = "谢谢"
    }
    function mOut(ele){
      ele.innerHTML = "把鼠标放在上面"
    }
  </script>

  <h3>(五)onmousedown、onmouseup 以及 onclick 事件</h3>
  <button class = "greenBtn" onmousedown="mDown(this)" onmouseup="mUp(this)">鼠标抬起</button>
  <script>
    function mDown(ele){
      ele.innerHTML = "鼠标已按下"
      ele.style.backgroundColor = "blue"
    }
    function mUp(ele){
      ele.innerHTML = "鼠标抬起"
      ele.style.backgroundColor = "green"
    }
  </script>

  <h3>(六)onfocus 事件</h3>
  <p>当输入框获取焦点时,改变其背景色
    <input type="text"
    onfocus = "changeBgColor(this,true)"
    onblur="changeBgColor(this,false)">
  </p>
  <script>
    function changeBgColor(ele,hasFocus){
      if(hasFocus){
        ele.style.backgroundColor = "yellow"
      }else{
        ele.style.backgroundColor = "gray"
      }
    }
  </script>

</body>
时间: 2024-10-10 07:29:57

Javascript:DOM事件(监听鼠标点击/释放,鼠标悬停/离开等)的相关文章

JavaScript的事件监听、捕获和冒泡

在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element.addEventListener(type, listener[, useCapture]); //IE6~8不支持 element.attachEvent('on' + type, listener)     //支持IE6~10,IE11不支持 element['on' + type] = fu

Javascript 的事件监听函数和移除事件监听函数

<html> <head></head> <body> <div id="hello">hello world</div> <script> //w3c中使用addEventListener()函数监听事件,IE中使用attachEvent()函数监听事件 //w3c中使用 removeEventListener ()函数移除事件监听,IE中使用detachEvent()函数来移除事件监听 var do

JavaScript自定义事件监听

一.事件的属性和方法 1 //事件Event 2 //属性:` 3 `bubbles`:布尔值,是否会冒泡 4 `cancelable`:布尔值,是否可以取消默认动作 5 `target`:目标对象 6 `currentTarget`:当前对象 7 `timeStamp`:时间戳(相对于某个时刻) 8 `type`:事件类型,即注册该事件的名字 9 `eventPhase`:返回事件传播的当前阶段 10 11 12 //方法 13 1.event.stopPropagation(); 阻止冒泡

Android事件监听(二)——点击鼠标事件

Button.ImageButton事件监听(setOnClickListener) 方法一:通过匿名内部类实现 代码如下: package com.note.demo2; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import

(12)JavaScript之[事件][事件监听]

事件 1 /** 2 * 事件: 3 * onload 和 onunload 事件在用户进入或离开页面时被触发 4 * 5 * onchange事件常结合对输入字段的验证来使用 6 * onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数. 7 * 8 * onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分.首先当点击鼠标按钮时, 9 * 会触发 onmousedown 事件,当释放鼠标

javascript事件监听与事件委托

事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件委托的方式来进行事件的监听. 每个事件都经历三个阶段 捕获 到达目标 冒泡 事件委托需要用到事件的冒泡,冒泡就是事件发生时,上层会一层一层的接收这个事件. 如下页面结构: <body> <div id="div1"> <div id="div2"

javascript事件监听

使用addEventListener() 方法用于向指定元素添加事件句柄,而且添加的事件句柄不会覆盖已存在的事件句柄,同时可以向一个元素添加多个事件句柄,可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件.你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素.如: window 对象. 使用 removeEventListener() 方法来移除事件的监听. 语法:addEventListener(event, function, useCapture)

html学习 - javascript事件监听以及addEventListener参数分析

事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:addEventListener. 这里解释一下一个网页的嵌套关系:最外层:window 包含:document 包含:html 包含: body 包含:div等等... addEventListener监听方法 按钮监听事件响应 首先我们需要获取一个按钮的handle,获取的方法很简单,代码如下: v

JavaScript-4.6鼠标事件监听,获取鼠标坐标window.event---ShinePans

<html> <head> <meta http-equiv="content-type" content="text/html" charset=GB2312"/> <title> 4.5 window.event应用 </title> <script> function body_onclick(){ alert("鼠标点击的坐标是\r\nx:"+event.x