JS 03事件
<script type="text/javascript">
function getUserInput() {
//获取用户输入的内容
var val = document.getElementById("userinput").value
//根据用户输入的内容播放相应的动画
playAnimate(val);
}
function playAnimate(str){
if(str=="黑洞"){
alert("播放反转的动画")
}else if(str=="反转"){
alert("播放反转动画");
}
}
</script>
<body>
<input id="userinput" type="text"/>
<input type="button" value="百度一下" onclick="getUserInput();">
</body>
onclick单机事件
//一个事件可以触发多个函数
function test1() {
//单击事件onclick：常用html标签是button标签、a标签、img标签
alert('nihao')
}
function test2() {
alert("世界");
} <button type="button" onclick="test();">点我测试</button>
<a href="javascript:void(0);" onclick="test1();test2();">点我测试2</a>
ondblick双击事件
//一个html元素可以绑定多个事件
function testDouble() {
//双击事件ondblclick：常用html标签是button标签、a标签、img标签
alert("我被双击了！")
}
<input type="button" value="点我测试双击" ondblclick="testDouble()">
<button type="button" ondblclick="testDouble();">点我测试双击</button>
onfocus成为焦点，onblur失去焦点
function testFocus() {
//获取焦点事件onfocus：常用的HTML标签有<input type="text">
console.log("万众瞩目");
}
function testOnblur(){
//丢失焦点事件onblur: 常用的html标签有<input type="text">
console.log("无人问津")
}
<input type="text" onfocus="testFocus();" onblur="testOnblur()"/>
onchange选中对象的值发生变化
function testOnchange() {
//html的value发生变化的事件：常用html标签有select
console.log("用户重新选择了城市")
}
<select onchange="testOnchange()">
<option value="1">广州</option>
<option value="2">上海</option>
<option value="3">北京</option>
</select>
<input type="text" onchange="testOnchange()"/>
onload页面装载
function testOnload() {
//页面加载事件：常用的html标签是body
console.log("页面加载...")
}
<body onload="testOnload()">
onmousemove鼠标移动
<style type="text/css">
#myDiv {
width: 300px;
height: 500px;
border: 1px solid grey;
background-image: url("timg.jpg");
}
</style>
<script type="text/javascript">
function fj(eve) {
var e = window.event || eve;
var x = e.pageX || e.x;
var y = e.pageY || e.y;
console.log(x + "--" + y);
}
</script>
<div id='myDiv' onmousemove="fj(event);"> </div>
onmouseeout 出去
onmousewheel滑动滚轮
onkeydown按键盘
JS 03事件的更多相关文章
- 探讨Js的事件的冒泡阶段
近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...
- 浅谈js的事件冒泡机制
很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...
- js键盘事件全面控制详解
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...
- Js 冒泡事件阻止
Js 冒泡事件阻止 1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...
- js event 事件兼容浏览器 ie不需要 event参数 firefox 需要
js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- JS通用事件监听函数
JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...
- js键盘事件全面控制
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js键盘事件全面控制详解【转】
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
- js 鼠标事件的抓取代码
js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...
随机推荐
- RK3288 修改ddr频率
转载请注明出处:https://www.cnblogs.com/lialong1st/p/10912334.html CPU:RK3288 系统:Android 5.1 RK3288 的 ddr 频率 ...
- Linux fdisk命令创建逻辑分区
[root@localhost ~]# fdisk /dev/sdb …省略部分输出… Command (m for help): n #建立新分区 Command action l logical ...
- WebSocketSharp 创建客户端和服务端
这里没有对onOpen.onClose.onError做案例,生产环境需要具备. 1.客户端 只推送不接收数据 创建WebSocketClient类 class WebSocketClient { W ...
- qt 设置程序控件样式
1. 以资源文件的形式设置控件样式 QFiledata(QString(":/style.qss")); QStringqssFile; if(data.open(QFile::R ...
- 手写一个MVVM
最近看了珠峰的架构课——实现一个MVVM. 首先,我们来了解一下什么是MVVM. MVVM是Model-View-ViewModel的简写.它本质上就是MVC 的改进版.MVVM 就是将其中的View ...
- 【Oracle/Java】给十六张表各插入十万条数据 单线程耗时半小时 多线程耗时一刻钟
测试机Oracle版本: SQL> select * from v$version; BANNER ----------------------------------------------- ...
- <JavaScript>constructor、prototype、__proto__和原型链
在看了网上很多相关的文章,很多都是懵逼看完,并不是说各位前辈们写得不好,而是说实在不容易在一两次阅读中理解透.我在阅读了一些文章后,自己整理总结和绘制了一些相关的图,个人认为会更容易接受和理解,所以分 ...
- Oracle数据库的坑
Oracle数据库爬过的坑 ORA-00918 未定义明确列 ORA-01861: 文字与格式字符串不匹配 DPI-1005 : unable to acquire Oracle environmen ...
- MySQL数据库之多线程备份工具mydumper
Mydumper介绍: 1)Mydumper是一个针对MySQL和Drizzle的高性能多线程备份和恢复工具 2)特性: 轻量级C语言编写 执行速度比mysqldump快10倍 快速的文件压缩 支持导 ...
- maven项目如何从私服nexus中下载依赖包
maven项目如何从私服nexus中下载依赖包 解决方法: 1.打开maven的config目录中settings.xml文件 2.在<profile></profiles> ...