模块化

IIFE

window.onload = function () {init()
}function init() {keySearch()others() // 多人开发的模块
}var keySearch = (function () {var searchKw = document.getElementById('J_search_kw'),autoKw = document.getElementById('J_autoKw'),recomKw = JSON.parse(document.getElementById('J_recomKw').innerHTML),kwOrder = 0,t = null;function setAutoKws() {autoKwChange() // 打开页面就开始轮播t = setInterval(autoKwChange, 2000)}function autoKwChange() {var len = recomKw.length;autoKw.innerHTML = recomKw[kwOrder]kwOrder = kwOrder >= len - 1 ? 0 : kwOrder + 1}return function () {// 模块化，return function出去，还可以传参 可以在function里做很多事setAutoKws()}
})();
// 其他人写的模块
var others = (function(){return function(){}
})();

模块化和面向对象的选取：可复用则插件化

input的oninput事件 HTML5新增

IE9及以下会有兼容问题，需使用onpropertychange
VUE的双向数据绑定并不是这么简单

input的onchang事件

失去焦点才触发
focus和blur时的值不同才触发

input的onfocus、onblur事件

如果只是修改样式，直接用css也能做到

由于placeholder修改样式不便，不同浏览器的定义有差异，因此常用onfocus、onblur来模拟placeholder

<input type="text"
maxlength="40"
value="请输入关键字"
name="SerchKey"
class="inp-txt"
onfocus="if(this.value=='请输入关键字')
{this.value='';this.className='inp-txt inp-txt-active'}"
onblur="if(this.value=='')
{this.value='请输入关键字';this.className='inp-txt'}"
autocomplete="off">

DOM-13 【实战】输入及状态改变事件、京东搜索框相关推荐

html中单选按钮设置监听事件,浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)，单选框radio...
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),单选框radio 若是只引用jquery的话,监听单选按钮改变事件如下: 男女 $(document).ready(functio ...
Python爬虫编程思想（114）：项目实战--使用Splash Lua抓取京东搜索结果
本文会利用Splash Lua脚本在京东商城上搜索商品,然后抓取搜索出的商品名称,以及将每一页搜索结果的截图保存为PNG格式的文件. 本例的核心是使用select_all方法通过CSS选择器得到搜索页 ...
金蝶EAS DEP脚本（5）给常用控件添加值改变事件
给常用控件添加事件一.F7 给F7添加值改变事件 //F7控件增加值改变监听 pluginCtx.getKDBizPromptBox("prmtCompany").addData ...
从结构、类型和状态3个方面，帮你掌握搜索框设计
我们在工作和生活中经常会用到搜索框,比如进入一款电商平台,我们需要去搜索自己想买的东西,就可以依靠搜索框完成这一动作,所以搜索框的设计也是重中之重:本文作者分享了关于从三个方面设计搜索框,我们一起来了 ...
同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴...
实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...
day05【JQuery框架】HTML引入Jquery、jQuery与JS区别、基本选择器、层级关系选择器、属性选择器、过滤选择器、对象遍历、Jquery的DOM操作【重点】、Jquery事件绑定
回顾 1. bom对象window对象三种弹框alert()confirm()prompt()二种定时器一次性:setTimout() --- 通过递归实现循环性循环性:setInterval()lo ...
评张逸的“状态和事件本质相同”（上）-DDD话语批评之一
有位同学给我发了一页张逸的书,让我评点一下其中观点. 图1 摘自<解构领域驱动设计>(张逸,2021) 图片中的"状态和事件本质上是相同的"真是令我"耳目一新 ...
[全文]DDD话语批评之一：评张逸的“状态和事件本质相同”
原创潘加宇 UMLChina 9月22日收录于话题 #建模带来竞争优势35个内容 #分析&设计(领域建模&领域驱动设计)55个内容有位同学给我发了张逸著的<解构领域驱动设计 ...
jQuery复选框选中状态更改事件
本文翻译自:jQuery checkbox checked state changed event I want an event to fire client side when a checkbo ...

DOM-13 【实战】输入及状态改变事件、京东搜索框

模块化

input的oninput事件 HTML5新增

input的onchang事件

input的onfocus、onblur事件

DOM-13 【实战】输入及状态改变事件、京东搜索框相关推荐

最新文章

热门文章