html鼠标移除事件监听,Javascript：DOM事件（监听鼠标点击/释放，鼠标悬停/离开等）...

2024-06-01 08:41:27

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

效果图：

代码：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript 事件

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;

}

(一)点击时改变HTML元素内容

1.直接改变

请点击文字

2.通过函数改变

请点击文字

function changeText(ele){

ele.innerHTML = "谢谢";

}

function checkCookies(){

if (navigator.cookieEnabled){

// alert("已启用 cookie")

}else{

// alert("未启用 cookie")

}

}

(二)onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie

(三)onchange事件

请输入英文字符：

当您离开输入字段时，会触发将输入文本转换为大写的函数。

function toUpper(ele){

ele.value = ele.value.toUpperCase();

}

(四)onmouseover 和 onmouseout 事件

把鼠标放在上面

function mOver(ele){

ele.innerHTML = "谢谢"

}

function mOut(ele){

ele.innerHTML = "把鼠标放在上面"

}

(五)onmousedown、onmouseup 以及 onclick 事件

鼠标抬起

function mDown(ele){

ele.innerHTML = "鼠标已按下"

ele.style.backgroundColor = "blue"

}

function mUp(ele){

ele.innerHTML = "鼠标抬起"

ele.style.backgroundColor = "green"

}

(六)onfocus 事件

当输入框获取焦点时，改变其背景色

onfocus = "changeBgColor(this,true)"

οnblur="changeBgColor(this,false)">

function changeBgColor(ele,hasFocus){

if(hasFocus){

ele.style.backgroundColor = "yellow"

}else{

ele.style.backgroundColor = "gray"

}

}

html鼠标移除事件监听,Javascript：DOM事件（监听鼠标点击/释放，鼠标悬停/离开等）...相关推荐

html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
鼠标按下松开恢复HTML,JavaScript onmouseup 事件：鼠标任何一个按键被松开
JavaScript onmouseup 事件当鼠标按键(任何一个键)被松开时,会触发 onmouseup 事件,如下例子所示: 在这个例子中,将鼠标放在图片上,当按下任何一个鼠标键后松开时,就会弹 ...
html dom事件不包括,HTML DOM - 事件
onchange 事件 onchange 事件常用于输入字段的验证. 下面的例子展示了如何使用 onchange.当用户改变输入字段的内容时,将调用 upperCase() 函数. onmouseov ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
鼠标移到子组件时发生mouseExited事件
比如一个JPanel 里面包括其它的组件,如JButton.现在要判断鼠标是否进入父JPanel,用addMouseListener的mouseEntered可以判断鼠标是否进入,但问题是:如果鼠标已 ...
淘宝小广告的鼠标移上实现html， JavaScript代码
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
从八道面试题看JavaScript DOM事件机制
原文:https://segmentfault.com/a/1190000013894510#articleHeader0 As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔 ...
JavaScript Dom 事件 Bom 定时器方法
目录 Dom HTML Dom Node:节点对象,其他5个的父对象修改标签体内容属性 innerHTML 事件 BOM 定时器方法 Navigator:浏览器对象 creen:显示器 ...
javascript DOM事件总结
1 <html> 2 <title>事件</title> 3 <meta charset="utf-8"/> 4 <body& ...
element分页点击事件_关于原生dom事件添加、删除方法的一些拓展
引言这是一个简单的需求,衍生的思考. 昨天QA提了一个富文本优化的需求,当插入视频和音频时,如果用户同时点击了视频.音频,那么其他的视频或者音频应该停止播放,只有最后一个点击的才会是播放状态. 需求 ...

最新文章

热门文章