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> & ...
随机推荐
- arcgis python 获得arcgis安装版本和安装位置
import arcpy print(arcpy.GetInstallInfo()['Version']) 和获得ArcGIS版本和安装位置 import arcpy # Use the dictio ...
- 续--Flask, Django - 区别
1. 目录结构 参考:https://blog.csdn.net/yang9520/article/details/79740374 中文文档(http://docs.jinkan.o ...
- android studio: 9:57 Unsupported Modules Detected: Compilation is not supported for following modules: map, app, ota, MediaEditor, rcLcmSercive, DroneSDK, qrcodelibrary, rcService, speechService. Unfo
Android studio Error “Unsupported Modules Detected: Compilation is not supported for following modul ...
- js根据数据条数与每页多少条数据计算页数,js前端计算页数
/** *根据数据条数与每页多少条数据计算页数 * totalnum 数据条数 * limit 每页多少条 */ function pageCount (totalnum,limit){ ...
- RT-Thread代码启动过程——以及 $Sub$ $main 与 $Super$ $main
[转]https://blog.csdn.net/yang1111111112/article/details/80913001 我们找到系统复位的地方,可以往下单步跟踪. ①从系统初始化开始执行,将 ...
- proj-6.1.1 编译
Requiring C++11 Requiring C++11 - done Configuring PROJ: PROJ_VERSION = 6.1.1 PROJ_ABI_VERSION = 6_1 ...
- starUML建模C++【逆向工程】
1.下载starUML 2.打开starUML,选择default approach 3.添加 Profile,把C++添加进去 4.在右侧的工程上点右键—[C++]—-[Reverse Engine ...
- InfluxDB+Grafana大数据监控系列之数据源配置(二)
一.Grafana 配置 InfluxDB 数据源 1.1 登录 Granfana 界面选择 InfluxDB 数据源 在前面我们已经部署好相应监控环境,登录Grafana:http://10.223 ...
- UIwindow ---密码框
程序运行显示结果如下 : 验证密码输入错误显示如下: 代码如下 : 1> //// PasswordInputWindow.m// UIWindow--密码框//// Created by ...
- shell数组编程
.数组定义 [chengmo@centos5 ~]$ a=( ) [chengmo@centos5 ~]$ echo $a 一对括号表示是数组,数组元素用“空格”符号分割开. .数组读取与赋值 得到长 ...